@font-face {
font-family: "Poppins";
src: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/fonts/Poppins-SemiBold.woff2);
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: "Poppins";
src: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/fonts/Poppins-Regular.woff2);
font-weight: 400;
font-display: swap;
}
body {
font-family:
"Poppins", system-ui, sans-serif;
font-weight: 400;
}
hr{
width: 100%;
}
h1{
font-weight: 600;
letter-spacing: 1px !important;
}
h2, h3, h4, h5, h6{
font-weight: 400;
letter-spacing: 1px !important;
}
*:hover{
transition: all 0.5s;
}
hr.spacermasthead{
height: 70px;
}
#masthead{ height: 80px;
width: 100%;
top: 0px;
position: fixed;
top: 0;
left: 0px;
background: rgba(10, 10, 10, 0.85);
border-bottom: 1px solid rgba(255,255,255,0.05);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
backdrop-filter: blur(10px);
background: linear-gradient(45deg, rgba(14, 11, 16, 0.8) 0%, rgba(14, 11, 16, 0.8) 100%);
}
#masthead.sticky{
position: fixed;
top: 0px;
left: 0px;
}
a{
cursor: url(https://wolpermedia.de/wp-content/themes/flexawesomebygalano/images/handcursor.svg), auto;
}
#page, #main, #primary {
overflow: visible; !important }
.nav-logo{
width: 78px;
display: block;
padding-top: 10px;
padding-left: 20px;
position: relative;
z-index: 1;
background: #fff;
height: 50px;
position: fixed;
left: 0px;
top: 0px;
-webkit-mask-image: url(https://wolpermedia.de/wp-content/uploads/2023/11/wolpermedia-wolpi.svg);
mask-image: url(https://wolpermedia.de/wp-content/uploads/2023/11/wolpermedia-wolpi.svg);
-webkit-mask-size: contain;
mask-size:contain;
-webkit-mask-position:  right bottom;
mask-position: right bottom;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
top: 10px;
display: none;
}
#logo{
width: 78px;
display: block;
padding-top: 10px;
padding-left: 20px;
position: relative;
}
#logo img{
display: block;
width: 100%;
}
h1.wp-block-post-title{
color: #000 !important;
}
h1.hyphens,
h2.hyphens,
h3.hyphens,
h4.hyphens,
h5.hyphens,
h6.hyphens{
hyphens: auto;
}
.padding60{
padding: 60px;
}
.leistungcarousel .box{
overflow: hidden;
}
.movecontainer{
margin-top: -130px;
}
.nav-bgvideo{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
object-fit: cover;
opacity: 0.7;
-webkit-filter: grayscale(100%); filter: grayscale(100%);
mix-blend-mode: multiply;
}
.swiper-button-prev, .swiper-button-next{
width: 40px;
height: 40px;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
background: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/arrow-slider-next.svg) no-repeat;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
background: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/arrow-slider.svg) no-repeat;
}
.swiper-button-prev:after, .swiper-button-next:after{
text-indent: -9999px;
background: red;
}
.header-logo-left #logo, .header-logo-right #logo{
background: #fff;
margin: auto auto;
margin-top: -7px;
}
.header-logo-left #logo img, .header-logo-right #logo img{
padding-left: 10px;
padding-right: 10px;
}
.header-logo-left #logo, .header-logo-right #logo{
height: 110px  !important;
}
@keyframes scroll {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(calc(-355px * 10));
}
}
@keyframes scroll2 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(calc(-255px * 5));
}
}
.agency-facts .section-content{
position: relative;
z-index: 10;
}
.agency-texts .image  {
border-radius: 8px;
overflow: hidden;
}
.container-box .section-content{
padding-left: 0px;
padding-right: 0px;
}
.container-box{
padding-left: 60px;
padding-right: 60px;
}
.container-box .container-box-content{
max-width: 1600px;
margin: auto auto;
}
.container-box .cfullwidth{
margin-left: 0px;
margin-right: 0px;
}
.btn-primary.btn-cta{
background: linear-gradient(45deg,  rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%);
border: none;
transition: transform .25s ease, box-shadow .25s ease;
}
.btn-primary.btn-cta:hover{
color: #fff;
background: linear-gradient(45deg,  rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.btn-primary.btn-cta-white{
background: #fff;
color: #000;
}
.btn-primary.btn-cta:hover{
border: none;
}
.btn-primary{
border: 1px solid #fff;
padding: 14px 30px;
font-size: 16px;
color: #fff;
border-radius: 9999px;
background: transparent;
font-family: Poppins; 
font-weight: 400;
line-height: 120%;
letter-spacing: 0.5px;
margin-right: 10px;
}
.btn-primary:hover{
background: #fff;
color: #000;
border: 1px solid #fff;
}
.btn-primary::after {
content: "→";
}
.btn-primary.arrow-down::after {
content: "↓";
font-size: 18px;
}
.btn-small{
font-size: 16px;
color: #fff;
padding: 0px;
border-radius: 9999px;
background: transparent;
font-family: Poppins; 
font-weight: 400;
line-height: 120%;
letter-spacing: 0.5px;
text-align: left;
}
.btn-vorteile{
font-size: 16px;
color: #fff;
padding: 0px;
border-radius: 9999px;
background: transparent;
font-family: Poppins; 
font-weight: 400;
line-height: 120%;
letter-spacing: 0.5px;
text-align: left;
}
.vorteile-box .image {
width: 65px;
margin-left: 0px !important;
background: rgba(210,82,91,0.15);
padding: 12px;
border-radius: 9999px;
margin-bottom: 30px !important;
mix-blend-mode: screen;
}
.vorteile-box{
hyphens: auto;
}
.vorteile-box article{
height: 100%;
}
.vorteile-box .item article .box{
border-radius: 8px;
}
.card-link{
display:block;
height:100%;
color:inherit;
text-decoration:none;
}
.card-link article{
height:100%;
}
.card-link .arrow{
color: #fff;
font-size: 25px;
}
.card-link:hover {
transform: translateY(-6px);
border-color: rgba(255,255,255,0.12);
box-shadow:
0 12px 40px rgba(0,0,0,0.45),
0 0 40px rgba(255,90,130,0.08);
background:
linear-gradient(
45deg,
rgba(63,45,53,0.2) 0%,
rgba(63,45,53,0.2) 100%
);
}
.whiteglas{
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.multi-button-wrapper .basic-button{
border: 1px solid #fff;
color: #fff;
}
.multi-button-wrapper{
gap: 10px;
justify-content: flex-start !important;
line-height: 110%;
}
.multi-button-wrapper .basic-button{
border: 1px solid #fff;
color: #fff;
}
.multi-button-wrapper .basic-button:hover{
background: #fff;
color: #000;
}
.multi-button-wrapper .cta-button-pink{
border: 2px solid #D72467;
color:  #D72467;
}
.multi-button-wrapper .cta-button-pink:hover{
color:  #fff;
background: #D72467;
}
.padding40{
padding: 40px;
}
.padding40{
padding: 20px;
}
@media screen and (max-width: 768px) {
#colophon .footer-newsletter .footer-newsletter-header{
max-width: 300px;
margin: auto auto;
font-size: 35px;
}
.slide-track {
width: calc(80px * 20);
}
.slide-track2 {
width: calc(80px * 15);
}
.slide {
width: 80px;
}
@keyframes scroll {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(calc(-80px * 10));
}
}
@keyframes scroll2 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(calc(-80px * 5));
}
}
}
#socialmedia-box{
justify-content: center;
}
.text-mit-bild-box .spaltennummer{
display: flex;
flex-wrap: wrap;
}
.text-mit-bild-box .nummer{
font-size: 74px;
line-height: 100%;
width: 65px;
margin-top: -26px;
color: #F0C526;
}
.text-mit-bild-box .spaltennummer .textcontainer{
width: calc(100% - 65px);
}
.home-agency-text  .item{ background: linear-gradient(to bottom,  rgba(17,17,17,0.99) 0%,rgba(17,17,17,0.9) 100%); max-width: 800px;
margin: auto auto;
}
.leistungen-home .spaltenbild{
width: 90px;
position: absolute;
right: 40px;
top: -30px;
}
.leistungen-home h2.spalten-titel{
padding-right: calc(100px * 1.0);
}
.home-agentur  .backgroundvideo {
position: absolute;
width: 800px;
height: auto;
object-fit: contain;
right: 0;
}
.home-agentur .item-content,
.home-agentur .item-content .text{
width: 650px;
}
.home-agentur .flexible-content-aufzahlung.flexible-flex-wrap{
padding: 10px;
background: #fff;
border-radius: 10px;
}
.nummer{
display: block !important;
}
.nummer[data-aos^="fade"][data-aos^="fade"] {
opacity: 1.0 !important;
}
.borderradius .item-content{
border-radius: 8px; 
}
.carousel-box .flexibleheight img{
object-fit: contain !important;
}
.progress-bar-wrapper {
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
}
.progress-container {
width: 100%;
height: 4px;
}
.progress-bar {
height: 4px;
background: #04AA6D;
width: 0%; background: #00b9ed; background: -moz-linear-gradient(45deg,  #00b9ed 1%, #f0c526 77%); background: -webkit-linear-gradient(45deg,  #00b9ed 1%,#f0c526 77%); background: linear-gradient(45deg,  #00b9ed 1%,#f0c526 77%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b9ed', endColorstr='#f0c526',GradientType=1 ); }
.kompass-parallex{
position: absolute;
left: -900px;
top: -100%;
width: 800px;
opacity: 0.5;
}
.diver-parallex{
position: absolute;
right: -550px;
top: -20%;
width: 550px;
opacity: 0.5;
transform: rotate(90deg);
}
.reviews-box .spaltenbild{
width: 250px;
height: 250px;
margin-top: -220px !important;
position: relative;
z-index: 5;
margin-left: 0px !important;
}
.reviews-box .spaltenbild img{
border-radius: 9999px;
display: block;
height: 100%;
width: 100%;
object-fit: cover;
border: 8px solid rgba(255,255,255,0.6);
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.reviews-box .text{
position: relative;
margin-top: 100px;
}
.reviews-box .text:before{
content: "";
position: absolute;
width: 157px;
height: 157px;
top: -57px;
background: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/quotation-mark.svg) no-repeat center center;
background-size: contain;
left: 350px;
} .reviews-box .item{
padding-bottom: 100px !important;
}
.reviews-box .text{
border-radius: 8px;
}
.reviews-box .item-content{
padding-top: 20px;
}
.reviews-box .spalten-titel{ background: rgb(242,184,38); background: -moz-linear-gradient(left,  rgba(242,184,38,1) 0%, rgba(240,197,38,1) 100%); background: -webkit-linear-gradient(left,  rgba(242,184,38,1) 0%,rgba(240,197,38,1) 100%); background: linear-gradient(to right,  rgba(242,184,38,1) 0%,rgba(240,197,38,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b826', endColorstr='#f0c526',GradientType=1 ); margin-top: -40px;
z-index: 2;
color: #033557 !important;
padding: 15px 60px 10px 70px;
width: calc(100% - 350px + 15px);
margin-left: -60px;
position: relative;
}
.reviews-box .spalten-titel:after{
content: "";
width: 50px;
height: 100%;
position: absolute;
right: -49px;
background: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/date-arrow-right.svg) no-repeat ;
background-size: 100% 100%;
top: 0px;
} .reviews-box .text-content{
position: relative;
z-index: 10;
}
.reviews-box .swiper-arrows{
position: absolute;
right: 0px;
top: 60px;
width: 100px;
height: 45px;
}
.reviews-box .arrow-divider{
height: 30px;
width: 1px;
background: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 7px;
}
.reviews-box .swiper-button-prev:after, .swiper-button-next:after{
font-size: 23px;
}
.reviews-box .swiper-button-prev, 
.reviews-box .swiper-button-next{
transition: all 0.3s;
top: 0px;
margin-top: 0px;
}
.reviews-box .swiper-button-prev:hover, 
.reviews-box .swiper-button-next:hover{
}
.reviews-box .firmenlogo{
width: 240px;
height: 80px;
background: #052435;
padding: 15px 30px; z-index: 5;
left: 50%;  border-radius: 5px;	
opacity: 0.95;
margin-top: 10px;
}
.reviews-box .firmenlogo img{
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.header-logo-left #logo{
left: 0px;
}
.projekte-box .spalten-titel{
padding: 15px 10px;
font-family: Poppins; font-weight: 800;
text-align: center;
border-radius: 8px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
width: 100%;
}
}
.projekte-box .section-content .content{
padding-left: 0px !important;
padding-right: 0px !important;	
}
.projekte-box .box{
border-radius: 1em;
}
.projekte-box .text{
color: #000;
width: 100%;
z-index: 10;
bottom: 0px;
}
.projekte-box .item .spaltenbild img{
transform: scale(1.0);
}
.projekte-box .item .spaltenbild img,
.projekte-box .item .spaltenbild,
.projekte-box .item{
transition: all 0.5s;
overflow: hidden;
}
.projekte-box .item:hover .spaltenbild img{
transform: scale(1.1);
}
.projekte-box .spalten-titel{
padding-left: 20px;
padding: 30px 50px 25px 30px;
right: 0px;
bottom: 0px;
line-height: 130%;
color: #fff;
font-size: 16px;
text-shadow: 0 0 10px rgba(0,0,0,0.3); }
.projekte-box .spalten-titel h4{
margin-bottom: 0px !important;
}
.projekte-box h4.spalten-titel a, 
.projekte-box h4.spalten-titel{
margin-bottom: 0px !important;
}
.projekte-box .spalten-titel:before { 
content: ""; 
position: absolute; 
top: -2px; 
left: -2px; 
width: 0; 
height: 0; 
background: transparent; 
border: 2px solid transparent; 
} 
@keyframes borderanimate { 
0% { 
width: 0; 
height: 0; 
border-top-color: black; 
border-right-color: transparent; 
border-bottom-color: transparent; 
border-left-color: transparent; 
} 
50% { 
width: 100%; 
height: 0; 
border-top-color: black; 
border-right-color: black; 
border-bottom-color: transparent; 
border-left-color: transparent; 
} 
100% { 
width: 100%; 
height: 100%; 
border-top-color: black; 
border-right-color: black; 
border-bottom-color: transparent; 
border-left-color: transparent; 
} 
} 
.projekte-box .spalten-titel:after { 
content: ""; 
position: absolute; 
top: -2px; 
left: -2px; 
width: 0; 
height: 0; 
background: transparent; 
border: 2px solid transparent; 
} 
@keyframes borderanimate2 { 
0% { 
width: 0; 
height: 0; 
border-top-color: transparent; 
border-right-color: transparent; 
border-bottom-color: transparent; 
border-left-color: black; 
} 
50% { 
width: 0; 
height: 100%; 
border-top-color: transparent; 
border-right-color: transparent; 
border-bottom-color: black; 
border-left-color: black; 
} 
100% { 
width: 100%; 
height: 100%; 
border-top-color: transparent; 
border-right-color: transparent; 
border-bottom-color: black; 
border-left-color: black; 
} 
} 
@keyframes zoomtext {
0% { 
transform: scale(0.6);
}
100% { 
transform: scale(1);
}
} 
h1{ }
h1{
}
h1 .anim:nth-child(odd){
position: relative;
top: -30px;
opacity: 0;
animation: slideinposition 0.2s linear forwards; 
}
h1 .anim:nth-child(even){
position: relative;
top: 30px;
opacity: 0;
animation: slideinposition 0.2s linear forwards; 
}
@keyframes slideinposition {
to { 
top: 0px;
opacity: 1;
}
}
.icon-on-the-left .item .item-content{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.icon-on-the-left .text {
width: calc(100% - 90px);
padding-left: 40px;
}
.icon-on-the-left .spaltenbild{
margin-top: 0px !important;
}
.svgdrawing path{
stroke-dasharray: 500;
stroke-dashoffset: 500;
}
.svgdrawing.active path{
animation: draw 5s linear forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
.gradienttitel h1,
.gradienttitel h2,
.gradienttitel h3,
.gradienttitel h4,
.gradienttitel h5,
.gradienttitel h6{
} .kontaktformular-box .wpcf7-not-valid-tip{
font-weight: 400;
}
.contactform-help textarea,
.contactform-help input[type="text"],
.contactform-help input[type="tel"],
.contactform-help input[type="email"]{
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to right, #EC8C39, #F53270) 1;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 65px;
position: relative;
}
form .width50,
form .width100{
margin-right: 20px;
margin-left: 20px;
margin-bottom: 40px;
}
form .width50{
width: calc(50% - 50px);
}
form .width100{
width: calc(100% - 50px);
}
.contactform-help span[data-name="your-company"],
.contactform-help span[data-name="your-phone"],
.contactform-help span[data-name="your-name"],
.contactform-help span[data-name="your-email"],
.contactform-help span[data-name="your-message"]{
position: relative;
}
.contactform-help span[data-name="your-company"]:before,
.contactform-help span[data-name="your-name"]:before,
.contactform-help span[data-name="your-phone"]:before,
.contactform-help span[data-name="your-email"]:before,
.contactform-help span[data-name="your-message"]:before{
content: "";
position: absolute;
width: 35px;
height: 35px;
background: red;
top: 20px;
z-index: 1;
left: 20px;
}
.contactform-help strong{
font-size: 15px;
letter-spacing: 2px;
text-transform: uppercase;
color: #D24B56;
}
.contactform-help span[data-name="your-company"]:before{
-webkit-mask:url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-company.svg);
mask: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-company.svg);
mask-position: center center;
background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); }
.contactform-help span[data-name="your-phone"]:before{
-webkit-mask:url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-telephone.svg);
mask: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-telephone.svg);
mask-position: center center;
background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); }
.contactform-help span[data-name="your-name"]:before{
-webkit-mask:url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-name.svg);
mask: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-name.svg);
mask-position: center center;
background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); }
.contactform-help span[data-name="your-email"]:before{
-webkit-mask:url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-mail.svg);
mask: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-mail.svg);
mask-position: center center;
background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); }
.contactform-help span[data-name="your-message"]:before{
-webkit-mask:url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-message.svg);
mask: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-message.svg);
mask-position: center center;
background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); }
.contactform-help h2{
display: flex;
justify-content: center;
}
.contactform-help h2 .titel{
color: #fff;
overflow: hidden; border-right: .05em solid orange; white-space: nowrap; margin: 0 auto; letter-spacing: .05em; animation: 
typing 8s steps(20, end) infinite,
blink-caret .5s step-end infinite;
width: 900px;
} @keyframes typing {
0% { width: 0 }
30% { width: 900px }
60% { width: 900px }
100% { width: 0 }
} @keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}
.marquee .contItem { 
display:inline-block; 
vertical-align:top; 
padding:20px; 
white-space:normal;
}
.marquee .contItem img{
object-fit:contain;
} 
.progress-bar-wrapper {
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
}
.progress-container {
width: 100%;
height: 4px;
}
.progress-bar {
height: 4px;
background: #04AA6D;
width: 0%; background: #00b9ed; background: -moz-linear-gradient(45deg,  #00b9ed 1%, #f0c526 77%); background: -webkit-linear-gradient(45deg,  #00b9ed 1%,#f0c526 77%); background: linear-gradient(45deg,  #00b9ed 1%,#f0c526 77%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b9ed', endColorstr='#f0c526',GradientType=1 ); }
.referenzbilder{
overflow: hidden;
}
.referenzbilder.vollbild  ul{
margin-left: -10px;
margin-right: -10px;
}
.referenzbilder li{
display: block;
padding: 10px !important;
}
.referenzbilder a{
width: 100%;
height: 100%;
display: block;
overflow: hidden;
}
.referenzbilder img{
width: 100%;
display: block;
}
.referenzbilder a{
overflow: hidden;
}
.referenzbilder a:hover img{
transform: scale(1.1);
}
.referenzbilder .image-custom-height img, 
.referenzbilder .image-custom-height video{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.projekte-box img{
height: 100%;
object-fit: cover;
}
.projekte-box .item-content a{
overflow: hidden;
display: block;
}
.projekte-box .spaltenbild {
padding-top: 75%;
position: relative;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
overflow: hidden;
}
.projekte-box .item-content{
overflow: hidden;
}
.projekte-box .spaltenbild img{
position: absolute;
top: 0px;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.hintergrundbilderextra {
position: absolute;
}
.projektheader{
margin-bottom: 50px;
}
.projektheader_content{
display: flex;
flex-wrap: wrap;
}
.projektheader_titel,
.projektheader_description{
color: #fff;
}
.projektheader_titel{
text-align: right;
padding-right: 15px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.projektheader_titel h1{
font-size: 48px;
text-align: right;
max-width: 600px;
letter-spacing: 3px;
line-height: 105%;
margin-bottom: 5px;
display: block;
width: 100%;
}
.projektheader_description{
padding-left: 15px;
line-height: 165%;
}
.projektheader_description_inner{
max-width: 500px;
}
.projektheader_content{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.projektheader_content .width50{
width: 50%;
}
.single .section-content{
padding-left: 30px;
padding-right: 30px;
}
.single .single-referenzbilder-nav .spaltenbild {
padding-top: 60%;
}
.single .single-referenzbilder-nav .item-content, 
.single .single-referenzbilder-nav .spaltenbild {
height: 100%;
}
.single .single-referenzbilder-nav .section-content{
padding-left: 0px;
padding-right: 0px;
padding-top: 20px;
}
.single-referenzbilder-nav .item{
width: 25%;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 40px;
}
.single-referenzbilder-nav .flex-wrap{
margin-left: -20px;
margin-right: -20px;
} 
.single-referenzbilder-nav .text {
left: 0px;
top: 0px;
position: absolute;
width: 100%;
height: 100%;
display: flex; background: linear-gradient(to right,  rgba(185,21,126,0.95) 0%,rgba(242,144,36,0.95) 100%); align-items: center;
justify-content: center;
display: none;
}
.single-referenzbilder-nav .text strong{
font-family: Poppins !important;
font-weight: 800;
text-align: center;
color: #ffffff;
font-size: 20px;
line-height: 1.1;
}
.single-referenzbilder-nav .item{
border-radius: 1em;
overflow: hidden;
}
.single-referenzbilder-nav img{
position: absolute;
top: 0px;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 8px;
}
.single-referenzbilder-nav .box:hover .text{
display: block;
}
.single-referenzbilder-nav  .text .text-content {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;	
}
.single-referenzbilder-nav .text .text-content strong{
max-width: 400px;
padding-left: 20px;
padding: 25px 20px;
right: 0px;
bottom: 0px;
position: relative;
font-size: 30px;
max-width: calc(100% - 60px);
letter-spacing: 1px;
}
.single-referenzbilder-nav strong:before { 
content: ""; 
position: absolute; 
top: -2px; 
left: -2px; 
width: 0; 
height: 0; 
background: transparent; 
border: 2px solid transparent; 
} 
.single-referenzbilder-nav strong:before { 
animation: borderanimate 0.5s linear forwards; 
} 
.single-referenzbilder-nav strong:after { 
content: ""; 
position: absolute; 
top: -2px; 
left: -2px; 
width: 0; 
height: 0; 
background: transparent; 
border: 2px solid transparent; 
} 
.single-referenzbilder-nav strong:after { 
animation: borderanimate2 0.5s linear forwards; 
} 
.single-projekte .content{
max-width: 1400px;
margin: auto auto;
}
.single-projekte .item-content a{
overflow: hidden;
display: block;
}
.single-projekte .item-content{
overflow: hidden;
border-radius: 8px;
}
.single-header-wrapper{
position: relative;
}
.single-header-wrapper:before{
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1;
background: linear-gradient(135deg,  rgba(195,42,112,1) 0%,rgba(238,135,43,1) 100%);
transform: none !important;
}
.sh-title,
.sh-image{
width: 50%;
}
.sh-title{
padding-right: 50px;
}
.sh-title h1{
display: block;
width: 100%;
}
.sh-title h2{
font-size: 25px !important;
display: block;
width: 100%;
}
.sh-image{
width: 50%;
padding-top: 50%;
border-radius: 8px;
position: absolute;
right: 0px;
overflow: hidden;
}
.sh-image img{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
object-fit: contain;
}
.sh-button{
background: #fff;
display: block;
padding: 10px 25px;
border-radius: 9999px;
color: #000;
}
.hintergrundbilderextra.rellax.top-left{
top: 0;
left: 0;
}
.hintergrundbilderextra.rellax.top-center{
top: 0;
left: 50%;
transform: translateX(-50%);
}
.hintergrundbilderextra.rellax.top-right {
top: 0;
right: 0;
}
.hintergrundbilderextra.rellax.center-left{
top: 50%;
transform: translateY(-50%);
left: 0;
}
.hintergrundbilderextra.rellax.center-center{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hintergrundbilderextra.rellax.center-right{
top: 50%;
right: 0px;
transform: translateY(-50%);
}
.hintergrundbilderextra.rellax.bottom-left{
bottom: 0;
left: 0px;
}
.hintergrundbilderextra.rellax.bottom-center{
bottom: 0;
left: 50%;
top: 50%
}
.hintergrundbilderextra.rellax.bottom-right{
bottom: 0;
right: 0px;
}
.projekttitleinfo{
font-size: 22px;
letter-spacing: 10px;
text-transform: uppercase;
margin-bottom: 5px;
line-height: 160%;
width: 100%;
text-align: right;
margin-bottom: 20px;
position: relative;
top: -6px;
}
.single-referenzbilder-nav h2{
font-size: 30px;
}
.single-referenzbilder-nav .text .text-content strong{
font-size: 18px;
}
.spalten-links-box a{
transition: all 0.5s;
}
@keyframes arrowSlide{
from { left: 0;}
to   {  left: 12px; }
}
.spalten-links-box a:hover .arrow-wrapper .arrow{
animation-name: arrowSlide;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.spalten-links-box .arrow-wrapper{
width: 50px;
height: 50px;
display: block;
position: relative;
transition: all 0.5s;
}
.spalten-links-box .arrow-wrapper .circle{
display: block;
width: 35px;
height: 35px;
border-radius: 9999px;
border: 1px solid #D2525B;
align-self: flex-end;
position: relative;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spalten-links-box .arrow-wrapper .arrow{
mask-image: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/right-arrow.svg);
-webkit-mask-image: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/right-arrow.svg);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center center;
-webkit-mask-position: center center;
mask-size: contain;
-webkit-mask-size: contain;
background: #D2525B;
position: absolute;
display: block;
width: 25px;
height: 25px;
top: 50%;
transform: translateY(-50%);
transition: all 0.5s;
}
.spalten-links-box.icon-on-the-left .text{
padding-left: 30px;
}
.spalten-links-box.icon-on-the-left .text{
width: calc(100% - 120px)
}
.spalten-links-box.icon-on-the-left .item .item-content{
align-items: center;
}
.hide{
display: none;
}
.item-aufzahlung.flexible-flex-wrap.coldesk-1.coltab-1.colhan-1{
padding-left: 0px;
padding-right: 0px;
}
.project-edge-top:before{
content: "";
width: 100%;
height: 40px;
background: red;
position: absolute;
top: -39px;
}
.glowflare{
overflow: hidden;
position: relative;
background:
radial-gradient(circle at 3% 55%, rgba(255, 45, 130, 0.45), transparent 22%),
radial-gradient(circle at 78% 24%, rgba(190, 45, 255, 0.45), transparent 9%),
radial-gradient(circle at 96% 88%, rgba(120, 50, 255, 0.35), transparent 18%),
radial-gradient(circle at 48% 100%, rgba(255, 190, 40, 0.35), transparent 11%),
radial-gradient(circle at 52% 82%, rgba(0, 180, 255, 0.45), transparent 24%),
linear-gradient(135deg, #210020 0%, #07122f 45%, #020817 100%);
background-blend-mode:
screen,
screen,
screen,
screen,
screen,
normal;
background-size:
140% 140%,
180% 180%,
160% 160%,
150% 150%,
170% 170%,
100% 100%;
animation: auroraAnimation 8s ease-in-out infinite alternate;
} @keyframes auroraAnimation {
0% {
background-position:
0% 50%,
100% 20%,
100% 100%,
50% 100%,
50% 80%,
0% 0%;
}
25% {
background-position:
10% 40%,
85% 15%,
90% 90%,
60% 95%,
45% 70%,
0% 0%;
}
50% {
background-position:
20% 60%,
70% 30%,
80% 100%,
40% 85%,
60% 90%,
0% 0%;
}
75% {
background-position:
5% 70%,
95% 20%,
100% 80%,
55% 100%,
40% 95%,
0% 0%;
}
100% {
background-position:
0% 50%,
100% 20%,
100% 100%,
50% 100%,
50% 80%,
0% 0%;
}
}
@media(max-width: 1200px){
.container-box,
.section-content{
padding-left: 30px;
padding-right: 30px;
}
.dienstleistungbox h3{
text-align: center;
}
.dienstleistungbox{
text-align: center;
}
.dienstleistungbox .item{
max-width: 800px;
margin: auto auto;
}
.icon-on-the-left .text{
width: 100%;
padding-left: 0px;
}
.icon-on-the-left .text{
padding-top: 20px;
}
.projekte-box .spalten-titel{
padding: 25px 20px;
}
.single-referenzbilder-nav .item{
width: 50%;
}
}
#footer-navigation{
width: 100%;
margin-top: 20px;
}
#footer-navigation #menu-law{
display: flex;
flex-wrap: wrap;	
justify-content: center;
}
#footer-navigation #menu-law a{
display: block;
padding-left: 10px;
padding-right: 10px;
}
#footer-navigation #menu-law li:first-child a{
padding-left: 0px;
}
#footer-navigation #menu-law li:last-child a{
padding-right: 0px;
}
.data-policy h2,
.imprint h2{
font-size: 22px;
letter-spacing: 1px;
hyphens: auto;
color: #DB5E49;
}
.data-policy h3,
.imprint h3{
font-size: 18px;
letter-spacing: 1px;
hyphens: auto;
color: #DB5E49;
}
.overflowhidden{
overflow: hidden;
}
.aboutbox .item{
position: relative;
}
.aboutbox .item:after{
content: "";
background: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/line.svg) no-repeat;
background-size: contain;
width: 10px;
height: 55px;
position: absolute;
right: 0px;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.aboutbox .spalten-box .item{
padding-bottom: 45px !important;
}
.aboutbox.spalten-box .item{
padding-bottom: 80px !important;
} textarea::-webkit-scrollbar {
display: none;
} textarea {
-ms-overflow-style: none; scrollbar-width: none; resize: none;
}
@keyframes slidetextarea{
from { height: 84px;}
to   {  height: 300px; }
}
.close.rotate{
animation-name: rotateClose;
animation-duration: 1s;
}
.kontaktformular-box input[type="text"],
.kontaktformular-box input[type="email"],
.kontaktformular-box input[type="tel"],
.kontaktformular-box textarea{
transition: all 0.8s;
}
.kontaktformular-box input[type="text"]:focus, 
.kontaktformular-box input[type="email"]:focus, 
.kontaktformular-box input[type="tel"]:focus{
border-top-right-radius: 5px;
border-top-left-radius: 5px;
outline: none;
}
.kontaktformular-box textarea:focus{
animation-name: slidetextarea;
animation-duration: 1s;
animation-fill-mode: forwards;
outline: none;
}
.contactform-help span[data-name="your-message"]:before{
}
.kontaktformular-box#kontaktformular-block_c5fa4e316d9be666a847583b753893d1 textarea{
-ms-overflow-style: none; scrollbar-width: none; }
.kontaktformular-box#kontaktformular-block_c5fa4e316d9be666a847583b753893d1 textarea::-webkit-scrollbar {
display: none;
}
.kontaktformular-box .flex-wrap{
margin-left: -20px;
margin-right: -20px;
}
.kontaktformular-box input[type="submit"]{
cursor: pointer;
}
.kontaktformular-box .wpcf7 .wpcf7-acceptance input[type="checkbox"]{
width: 20px;
height: 20px;
border: none;
}
.kontaktformular-box .wpcf7 .wpcf7-acceptance .wpcf7-list-item{
width: 100%;
display: block;
}
.kontaktformular-box .wpcf7 .wpcf7-acceptance label{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.kontaktformular-box .wpcf7 .wpcf7-acceptance  .wpcf7-list-item-label{
width: calc(100% - 30px);
display: block;
}
.kontaktformular-box .wpcf7-not-valid-tip{
font-size: 15px;
color: #F62D73;
padding-top: 5px;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
font-size: 16px;
}
.kontaktformular-box .wpcf7-acceptance{
border-radius: 5px;
margin-bottom: 40px;
}
.kontaktformular-box .wpcf7-acceptance .wpcf7-list-item-label{
margin-bottom: 0px;
padding-left: 10px;
}
.kontaktformular-box form .width100{
margin-bottom: 30px;
}
.kontaktformular-box .wpcf7-acceptance{
border: none !important;
background: #000;
padding: 20px;
max-width:;
margin: auto auto;	
}
.kontaktformular-box .button-fa{
position: relative;
max-width: 200px;
margin: auto auto;
}
.kontaktformular-box .button-fa input[type="submit"]{
display: flex;
align-items: center;
letter-spacing: 2px;
transition: all 0.5s;
padding-left: 30px;
padding-right: 80px;
color: #000;
letter-spacing: 2px;
line-height: 100%;
border-radius: 9999px;
background: linear-gradient(45deg,  rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%);
background: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/right-arrow.svg) no-repeat #fff;
background-size: 30px auto;
background-position: right 25px center;
transition: all 0.3s;
margin-top: 20px;
}
.kontaktformular-box .button-fa input[type="submit"]:hover{
background-position: right 140px center;
padding-left: 80px;
}
.exzellenteswebdesign .text-content{
max-width: 600px;
}
.gridgalerie-box.custommockupgrid  .image-wrapper{
grid-auto-rows: minmax(50vh, auto)
}
.contactform-help textarea,
.contactform-help input[type="text"],
.contactform-help input[type="email"]{
border-width: 3px;
border-style: solid;
border-image: linear-gradient(to right, #EC8C39, #F53270) 1;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 70px;
position: relative;
border-radius: 5px;
}
form .width50,
form .width100{
margin-right: 20px;
margin-left: 20px;
margin-bottom: 40px;
}
form .width50{
width: calc(50% - 50px);
}
form .width100{
width: calc(100% - 50px);
}
#angebotanfordern span[data-name="your-name"],
#angebotanfordern span[data-name="your-email"],
#angebotanfordern span[data-name="your-message"]{
position: relative;
}
#angebotanfordern  span[data-name="your-name"]:before,
#angebotanfordern span[data-name="your-email"]:before,
#angebotanfordern span[data-name="your-message"]:before{
content: "";
position: absolute;
width: 45px;
height: 45px;
background: red;
top: 15px;
z-index: 1;
left: 20px;
}
#angebotanfordern span[data-name="your-name"]:before{
-webkit-mask:url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-name.svg);
mask: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-name.svg);
mask-position: center center;
background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); }
#angebotanfordern span[data-name="your-email"]:before{
-webkit-mask:url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-mail.svg);
mask: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-mail.svg);
mask-position: center center;
background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); }
#angebotanfordern span[data-name="your-message"]:before{
-webkit-mask:url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-message.svg);
mask: url(//wolpermedia.de/wp-content/themes/flexawesomebygalano/images/icon-message.svg);
mask-position: center center;
background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); }
.contactinfobox .titel{
font-size: 100px;
line-height: 90%;
font-family: Poppins;
font-weight: 800;
}
.minspacer,
.minspacer80{
height: 80px;
}
.aboutbox .item:last-child:after{
content: "";
display: none;
}
.leistungcarousel .content{
padding-left: 50px;
padding-right: 50px;
}
.leistungcarousel .text-detail h2{
font-size: 100px;
font-size: 5vw;
}
.seeyousoonbox .item .item-content{
border-radius: 8px;
}
.seeyousoonbox h2{
font-size: 12vw !important;
text-shadow: #000 0px 0px 1px;
-webkit-font-smoothing: antialiased;
}
.swiper-container-bewertung,
.swiper {
overflow: hidden;
}
.cards {
height: 100%;
overflow: auto;
justify-content: center;
align-items: center;
height: 200%;
}
.card {
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
background: #fff;
height: 200px;
width: 300px;
margin: 20px;
transform: translateY(var(--translateY));
will-change: transform;
}
.blur1px{
filter: blur(1px);	
}
h2.h2stroke{
-webkit-text-fill-color: transparent; -webkit-text-stroke-width: 0.5px; 
-webkit-text-stroke-color: #fff; 
letter-spacing: 5px;
}
.dienstleistungbox {
border-bottom: 1px solid #000;
}
.projektnavigation{
padding-left: 15px;
display: flex;
flex-wrap: wrap;
}
.projektnavigation .nav-links{
display: flex;
flex-wrap: wrap;
}
.projektnavigation .arrow-left,
.projektnavigation .arrow-right{
background: #fff;
padding: 10px 10px;
line-height: 100%;
display: block;
transition: all 0.3s; }
.projektnavigation a .arrow-left ,
.projektnavigation a .arrow-right {
color: #000;
}
.projektnavigation .arrow-right{
margin-right: 4px;
}
.projektnavigation a:hover .arrow-left,
.projektnavigation a:hover .arrow-right{
background: none;
box-shadow: inset 0 0 0 2px #fff;
color: #fff;
}
.linebetween .section-content:before{
content: "";
display: block;
position: absolute;
width: 1px;
height: 100%;
background: #333;
left: 50%;
}
.linebetween .section-content .image {
opacity: 1 !important;
}
.h1title{
z-index: 50;
position: relative;
}
.h1title h1{
max-width: 550px;
}
.marked-colored{
background: linear-gradient(90deg, #D21274, #ED732B);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.box-title .marked{
-webkit-text-stroke-width: 0;
-webkit-text-fill-color: #000;
}
.archive h1{
font-size: 110px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
-webkit-text-fill-color: transparent;
text-align: center;
}
.exzellenteswebdesign{
z-index: 10;
position: relative;
}
.spaltenbild svg{
width: 100%; 
height: auto;
}
.single-leistungen h1{
display: block;
text-align: left;
font-size: 60px;
margin-bottom: 30px;
-webkit-text-stroke-width: 0.5px; 
-webkit-text-stroke-color: #fff; 
color: transparent;
font-family: Poppins; font-weight: 800;
letter-spacing: 3px;
line-height: 80% !important;
text-align: left;
}
.servicedescription_header{
display: flex;
flex-wrap: wrap;
position: relative;
}
.servicedescription_header .servicedescription_image{
position: relative;
}
.servicedescription_header img{
position: absolute;
left: 0px;
top: 0px;
width: 60%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.servicedescription_header .servicedescription_text{
padding-top: 120px;
padding-bottom: 120px;
padding-left: 50%;
z-index: 1;
}
.servicedescription_text_content{
background: #000;
padding: 10%; background: linear-gradient(135deg,  rgba(195,42,112,1) 0%,rgba(238,135,43,1) 100%); border-radius: 8px;
}
.servicedescription_text h1{
font-size: 50px;
line-height: 90%;
}
.servicedescription_text h2{
font-size: 30px;
}
.servicedescription_text a{
background: #fff;
padding: 20px 30px;
font-family: Poppins; font-weight: 800;
display: block;
color: #000;
border-radius: 9999px;
letter-spacing: 1px;
line-height: 100%;
text-align: center;
}
.single #angebotanfordern{ background: linear-gradient(135deg,  rgba(195,42,112,1) 0%,rgba(238,135,43,1) 100%); }
.single-leistungen-nav ul{
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(4, 1fr);
}
.single-leistungen-nav ul li{
display: flex;
flex-wrap: wrap;	
border: 3px solid #fff;
transition: all 0.3s;
border-radius: 5px;
width: 100%;
}
.single-leistungen-nav ul li strong{
width: calc(100% - 180px);
display: block;
transition: all 0.3s;
position: relative;
left: 0px;
display: flex;
align-items: flex-end;
line-height: 130%;
color: #fff;
bottom: 0px;
width: 100%;
z-index: 1;
font-size: 17px;
padding: 6px 20px 8px 20px;
letter-spacing: 1px;
}
.single-leistungen-nav ul li a{
display: flex;
flex-wrap: wrap;
align-items: center;
border-radius: 3px;
color: #333;
font-size: 20px;
position: relative;
border-radius: 8px;
width: 100%; overflow: hidden;
}
.single-leistungen-nav ul li strong span{
display: block;
}
.single-leistungen #angebotanfordern input[type="text"],
.single-leistungen #angebotanfordern input[type="email"]{
padding: 17px 40px 17px 80px;
background: none;
border-bottom: 3px solid #fff;
}
.single-leistungen #angebotanfordern textarea{
border-radius: 8px;
padding: 20px 40px;
min-height: 130px;
}
.single-leistungen #angebotanfordern form .width50, 
.single-leistungen #angebotanfordern form .width100{
margin-bottom: 20px;
}
.single-leistungen .basic_columns_box li{
width: 33.33%;
}
.leistungen_header{
background: linear-gradient(135deg, #c02474 1%, #f08c26 100%);
padding-top: 80px;
padding-bottom: 200px;
}
.leistungen_header h1{
font-size: 150px;
color: #ffffff;
}
.leistungen_header h2{
color: #ffffff;
font-size: 40px;
line-height: 1.0;
margin-bottom: 40px;
}
.leistungen_images_wrapper{
background: #111;
}
.leistungen_images_wrapper ul{
display: flex;
flex-wrap: wrap;
margin-left: -30px;
margin-right: -30px;
}
.leistungen_images_wrapper .item{
width: calc(33.33% - 40px);
position: relative;
margin-left: 20px;
margin-right: 20px;
}
.leistungen_images_wrapper .item a{
display: block;
width: 100%;
padding-top: 100%;	
overflow: hidden;
border-radius: 5px;
}
.leistungen_images_wrapper .item img{
position: absolute;
width: 100%;
height: 100%;	
object-fit: cover;
top: 0px;
left: 0px;
border-radius: 5px;
}
.flex_block_columns{
display: flex;
flex-wrap: wrap;
}
.flex_block_columns h2,
.flex_block_columns h3,
.flex_block_columns h4,
.flex_block_columns h5,
.flex_block_columns h6{
font-family: Poppins; font-weight: 800;
font-size: 35px;
}
.flex_block_columns{
margin-left: -20px;
margin-right: -20px;
}
.flex_block_columns li{
padding-left: 20px;
padding-right: 20px;
}
.flex_block_columns.columns_1 li{
width: 100%;
}
.flex_block_columns.columns_2 li{
width: 50%;
}
.flex_block_columns.columns_3 li{
width: 33.33%;
}
.flex_block_columns.columns_4 li{
width: 25%;
}
.flex_block_columns.columns_5 li{
width: 20%;
}
.flex_block_columns.columns_6 li{
width: 12.5%;
}
#breadcrumbs{
font-size: 12px;
margin-bottom: 20px;
}
#breadcrumbs a{
color: #fff;
}
.archive-leistungen-nav ul{
display: flex;
flex-wrap: wrap;
margin-left: -20px;
margin-right: -20px;
}
.archive-leistungen-nav li{
width: 33.33%;
border-radius: 8px;
overflow: hidden;
padding: 20px;
}
.archive-leistungen-nav li a{
border-radius: 8px;
display: block;
border-radius: 8px;
overflow: hidden;
padding-top: 100%;
position: relative;
}
.archive-leistungen-nav li a strong {
position: absolute;
bottom: 0px;
left: 0px;
padding: 60px 20px 20px 20px;
color: #fff; background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); width: 100%;
transition: all 0.3s;
font-size: 18px !important;
}
.archive-leistungen-nav li a:hover strong {
padding: 60px 20px 40px 20px;
}
.archive-leistungen-nav li a img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
top: 0px;
transition: all 0.3s;
}
.archive-leistungen-nav li a:hover img{
transform: scale(1.1);
}
.title-line-bg{
color: #fff;
position: absolute;
font-size: 600px;
bottom: 0px;
left: 0px;
top: 0px;
text-transform: uppercase;
line-height: 100%;
color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.04); white-space: nowrap;
overflow: hidden;
}
.title-line-bg br{
display: none;
}
.btn-black{
color: #1B161E;
border: 1px solid #1B161E;
}
.btn-black:hover{
color: #fff;
background: #1B161E;
border: 1px solid #1B161E;
}
.dl_wrapper .dl_item{
border-bottom: 1px solid rgba(255,255,255,0.4);
padding-bottom: 20px;
padding-top: 20px;
}
.dl_wrapper .dl_item h3{
line-height: 100%;
margin-bottom: 0px;
}
.leistungen img{
border-radius: 8px;
}
.textundblocks-box .tub_blocks_text{
width: 35%;
padding-right: 30px;
}
.textundblocks-box .tub_blocks_wrapper{
width: 65%;
}
.textundblocks-box .tub_blocks_wrapper .item-content{
border-radius: 10px !important;
}
.textundblocks-box .tub_blocks_wrapper .item{
border-radius: 20px; width: calc(50% - 20px);
}
.textundblocks-box .tub_blocks_wrapper .item .image{
max-width: 40px;
margin-bottom: 20px;
}
.textundblocks-box .tub_blocks_wrapper .item .spalten-titel{
font-size: 20px;
font-family: Poppins; 
font-weight: 800;
text-transform: uppercase;
letter-spacing: 3px;
}
.textundblocks-box .tub_blocks_wrapper .item .text{
display: block;
width: 100%;
}
.textundblocks-box .tub_blocks_wrapper .item{
font-size: 20px;
}
.textundblocks-box .tub_blocks_text .titlecontent{
font-size: 100px;
font-family: Poppins; font-weight: 800;
line-height: 95%;
font-weight: 400;
letter-spacing: 2px;
padding-right: 20px;
}
.textundblocks-box .tub_blocks_wrapper{
grid-gap: 40px;
}
.textundblocks-box .tub_blocks_wrapper .item .item-content{
padding: 40px;
}
.textundblocks-box .tub_blocks_wrapper .item p{
margin-bottom: 0px;
}
.textundblocks-box .tub_blocks_wrapper a{
color: #fff;
transition: all 0.3s;
font-size: 18px;
display: block;
width: 100%;
transition: all 0.5s;
}
.textundblocks-box .tub_blocks_wrapper a .text-detail::after {
content: "→";
font-size: 18px;
display: block;
transition: all 0.5s;
}
.textundblocks-box .tub_blocks_wrapper a,
.textundblocks-box .tub_blocks_wrapper a .item-content{
transition: all 0.5s;
display: block;
width: 100%;
height: 100%;
}
.textundblocks-box .tub_blocks_wrapper .item-content{
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
background-size: ;
}
.textundblocks-box .tub_blocks_wrapper a:hover .item-content{
background: linear-gradient(45deg,  rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%);
}
.textundblocks-box .tub_blocks_wrapper a:hover::after{
margin-left: 10px;
}
.textundblocks-box  .tub_blocks_text .box-title {
color: #fff;
}
#more-leistungen{
background: #111;
}
.brlbs-cmpnt-dialog-entrance-description{
height: 200px !important;
overflow-y: scroll;
}
.button_all_projects{
width: 300px;
height: 300px;
display: block;
border-radius: 9999px;
margin: auto auto; background: linear-gradient(135deg,  #EC8C39 0%,#F53270 100%); position: relative;
transform: scale(0.9);
transition: transform 0.12s linear;
will-change: transform;
}
.button_all_projects strong{
position: absolute;
display: block;
font-family: Poppins; font-weight: 800;
text-transform: uppercase;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: rgba(255,255,255,0);
font-size: 60px;
line-height: 90%;
text-align: center;
top: 50%;
left: 50%;
letter-spacing: 3px;
transform: translate(-50%, -55%);
}
.button_all_projects:hover{
color: #fff;
background: transparent;
border: 3px solid #EF704A;
}
.button_all_projects:hover strong{
-webkit-text-fill-color: #fff;
}
.button_all_projects svg{
width: 80%;
height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
fill: none !important;
stroke-width: 3 !important;
stroke: #fff !important;
display: none;
}
.button_all_projects:hover svg{
display: block;
}
.videomitmaske-box .video-content{
width: 100%;
position: relative;
}
.videomitmaske-box .video-content{
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: auto;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
.videomitmaske-box .video-content video{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.icon-on-the-left.spalten-links-box {
display: none;
}
.divider-in-the-middle .section-content{
position: relative;
}
.divider-in-the-middle .section-content:before{
content: "";
position: absolute;
display: block;
width: 3px;
height: 100%;
background: #000;
left: 50%;
}
.divider-in-the-middle video{
opacity: 0.5;
}
.box-more-text{
position: relative;
}
.agency-facts.spalten-mit-icon-box .spalten-titel{
font-family: Poppins;
font-weight: 400;
}
.agency-facts.spalten-mit-icon-box .spaltenbild {
padding: 12px;
border-radius: 9999px;
}
.agency-facts.spalten-mit-icon-box .spaltenbild:after{
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.3);
mix-blend-mode: overlay;
border-radius: 9999px;
}
.spalten-box  .item.swiper-slide .spaltenbild{
margin-bottom: 0px;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="file"], .wpcf7 textarea,
.kontaktformular-box .button-fa input[type="submit"]{
font-family: Poppins;
font-weight: 400;
font-size: 16px;
}
.wpcf7-spinner{
position: absolute;
}
.page-id-4513 #content{
overflow: inherit;
}
.page-id-4513 section{
top: 0px;
}
.home-leistungen{
position: sticky;
top: 0px;
}
.home-leistungen .flexible-content-aufzahlung .item-aufzahlung{
border-top: 1px solid #666;
padding-top: 25px;
padding-bottom: 25px;
line-height: 120%;
}
.home-leistungen .flexible-content-aufzahlung  .item-aufzahlung:last-child{
border-bottom: 1px solid #666;
}
.home-leistungen .flexible-content-image img{
width: 550px;
height: auto;
border-radius: 8px;
position: relative;
z-index: 1;
}
.home-leistungen .item{
position: relative;
}
.home-leistungen  .flex-wrap{
align-items: center;
}
.home-leistungen .item:last-child:after{
content: "";
position: absolute;
width: 60%;
height: 300px;
border-top: 5px solid #D2525B;
border-left: 5px solid #D2525B;
border-bottom: 5px solid #D2525B;
top: 50%;
right: -10px;
transform: translateY(-50%);
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.text-content .spalten-titel span.marked{
color: #fff !important;
-webkit-text-fill-color: #fff;
}
.logo-carousell .flexibleheight img{
object-fit: contain;
}
.logo-carousell .content {
padding-left: 50px;
padding-right: 50px;
}
.swiper-title{
padding-right: 100px;
}
@media(max-width: 1500px){
.leistungen-home h2.spalten-titel{
padding-right: calc(100px * 0.9);
}
.leistungen-home .spaltenbild{
position: absolute;
right: calc(40px * 0.9);
top: calc(-30px * 0.9);
width: calc(90px * 0.9);
}
.flexibler-inhalt-box#flexibler-inhalt-block_b527fcf90689ab7c193cb7f8d9558668.home-agentur strong.spalten-subtitel{
font-size: 60px !important;
}
.flexibler-inhalt-box#flexibler-inhalt-block_b527fcf90689ab7c193cb7f8d9558668.home-agentur{
background-size: 900px !important;
}
.flexibler-inhalt-box#flexibler-inhalt-block_3d3d90c6b185c794b221545f8bb3e073.home-agentur strong.spalten-subtitel{
font-size: 50px;
}
.home-agentur .item-content, .home-agentur .item-content .text{
width: 560px;
}
}
@media(max-width: 1400px){
.single-leistungen h1 span{
font-size: 100px;
}
.textundblocks-box .tub_blocks_text{
width: 100%;
padding-right: 0px;
}
.textundblocks-box .tub_blocks_text .titlecontent{
text-align: center;
font-size: 120px;
padding-right: 0px;
margin-bottom: 50px;
}
.textundblocks-box .tub_blocks_wrapper{
width: 100%;
margin: auto auto;
}
.contactinfobox .titel{
font-size: 80px;
}
.contactinfobox .titel br{
display: none;
}
}
@media(max-width: 1300px){
.flex_block_columns.columns_3 li{
width: 50%;
}
.flexibler-inhalt-box#flexibler-inhalt-block_b527fcf90689ab7c193cb7f8d9558668.home-agentur strong.spalten-subtitel{
font-size: 45px !important;
}
.home-agentur .item-content, .home-agentur .item-content .text{
width: 450px;
}
}
@media(max-width: 1200px){
.leistungen-home h2.spalten-titel{
padding-right: calc(100px * 0.8);
}
.leistungen-home .spaltenbild{
position: absolute;
right: calc(40px * 0.8);
top: calc(-30px * 0.8);
width: calc(90px * 0.8);
}
.home-leistungen .item:first-child{
padding-bottom: 0px !important;
}
.home-leistungen .item:last-child,
.home-leistungen .item:last-child:after,
.home-leistungen .flexible-content-image{
display: none;
}
.seeyousoonbox  .content{
max-width: 750px;
}
}
@media(max-width: 1100px){
.kontaktformular-box .button-fa input[type="submit"]{
font-size: 18px;
padding-left: 20px;
padding-right: 50px;
}
#colophon .footer-newsletter{
width: 100%
}
.footer-logo img{
width: 100px;
}
.footer-logo-nav{
margin: auto auto;
margin-top: -20px;
}
.footer-logo-nav{
display: none;
}
#colophon .content{
padding-top: 0px;
}
.footer-newsletter-header{
text-align: center;
}
}
@media(max-width: 1024px){
.leistungen-home h2.spalten-titel{
padding-right: calc(100px * 0.7);
}
.leistungen-home .spaltenbild{
position: absolute;
right: calc(40px * 0.7);
top: calc(-30px * 0.7);
width: calc(90px * 0.7);
}
.container-box,
.section-content{
padding-left: 30px;
padding-right: 30px;
}
.single-leistungen h1{
font-size: 50px;
max-width: 600px;
}
.single-leistungen-nav ul{
grid-gap: 17px;
}
.single-leistungen-nav ul li:nth-child(2) img, .single-leistungen-nav ul li:nth-child(3) img, .single-leistungen-nav ul li:nth-child(4) img{
width: 130px;
height: 130px;
}
.single-leistungen-nav ul li:nth-child(2) strong, .single-leistungen-nav ul li:nth-child(3) strong, .single-leistungen-nav ul li:nth-child(4) strong{
font-size: 17px;
padding-top: 10px;
padding-bottom: 10px;
width: calc(100% - 130px);
}
.single-leistungen-nav ul li:nth-child(1) strong{
font-size: 17px;
padding-top: 10px;
padding-bottom: 10px;
}
.section-content .single-leistungen-nav ul li:nth-child(1), 
.section-content .single-leistungen-nav ul li:nth-child(2), 
.section-content .single-leistungen-nav ul li:nth-child(3), 
.section-content .single-leistungen-nav ul li:nth-child(4){
padding-left: 0px;
}
.single-leistungen-nav ul li:nth-child(1){
grid-row: 1 / 3;
}
.single-leistungen-nav ul li:nth-child(2){
grid-row: 1 / 2;
}
.single-leistungen-nav ul li:nth-child(3){
grid-row: 2 / 3;
}
.single-leistungen-nav ul li:nth-child(4){
grid-column: 1 / 3; 
grid-row: 3 / 4;
}
.single-referenzbilder-nav .flex-wrap{
margin-left: -10px;
margin-right: -10px;
}
.single-referenzbilder-nav .item{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
}	
.h1title{
margin-bottom: -15px !important;
}
.aboutbox .item:after{
content: "";
background: #fff;
width: 1px;
height: 60px;
position: absolute;
right: 0px;
bottom: 25px;
left: 50%;
}
.projektheader_titel h1{
font-size: 35px;
letter-spacing: 3px;
}
.projekttitleinfo{
font-size: 18px;
}
.projektheader_description{
font-size: 18px;
}
.textundblocks-box .tub_blocks_wrapper .item .item-content{
padding: 30px;
}
}
@media(max-width: 1000px){
.contactinfobox .titel{
font-size: 60px;
}
}
@media(max-width: 920px){
form .width50, form .width100{
width: 100%;
margin-bottom: 30px;
}
.contactform-help span[data-name="your-phone"]:before, 
.contactform-help span[data-name="your-company"]:before, 
.contactform-help span[data-name="your-name"]:before, 
.contactform-help span[data-name="your-email"]:before, 
.contactform-help span[data-name="your-message"]:before{
width: 35px;
height: 35px;
}
.contactform-help h2 .titel{
-webkit-text-stroke-width: 0.5px;
}
.contactform-help textarea, 
.contactform-help input[type="tel"], 
.contactform-help input[type="text"], 
.contactform-help input[type="email"]{
padding-top: 10px;
padding-bottom: 10px;
}
form .width50, form .width100{
margin-bottom: 20px;
}
.servicedescription_header img{
width: 100% !important;
display: block !important; 
}
.servicedescription_header .servicedescription_text{
padding-top: 0px;
padding-left: 0px;
}
.single-leistungen-nav ul li:nth-child(1) strong{
font-size: 15px;
}
.single-leistungen-nav ul li:nth-child(2) strong, 
.single-leistungen-nav ul li:nth-child(3) strong, 
.single-leistungen-nav ul li:nth-child(4) strong{
padding: 10px 15px;
width: calc(100% - 100px);
font-size: 15px;
}
.single-leistungen-nav ul li:nth-child(2):hover img,
.single-leistungen-nav ul li:nth-child(3):hover img,
.single-leistungen-nav ul li:nth-child(4):hover img{
width: 80px;
}
}
@media(max-width: 768px){
.text-mit-bild-box#text-mit-bild-block_d17ab2e40b95defcdfd9d40591d689b6 .break_on_tablet .image{
padding-top: 0px !important;
}
.text-mit-bild-box#text-mit-bild-block_d17ab2e40b95defcdfd9d40591d689b6 .text {
padding-bottom: 0px !important;
}
.agency-texts.text-mit-bild-box {
text-align: center;
}
.textundblocks-box .tub_blocks_wrapper .item .spalten-titel{
font-size: 18px;
}
.textundblocks-box .tub_blocks_wrapper a{
font-size: 16px;
}
.agency-texts{
}
.leistungen-home h2.spalten-titel{
padding-right: calc(100px * 0.6);
}
.leistungen-home .spaltenbild{
right: calc(40px * 0.6);
top: calc(-30px * 0.6);
width: calc(90px * 0.6);
}
.single .section-content,
.container-box,
.section-content{
padding-left: 20px;
padding-right: 20px;
}
.swiper-button-prev{
left: 0px;
}
.swiper-button-next{
right: 0px;
}
.single-leistungen-nav ul li:nth-child(2) img, .single-leistungen-nav ul li:nth-child(3) img, .single-leistungen-nav ul li:nth-child(4) img{
width: 100px;
height: 100px;
}
.flex_block_columns.columns_2 li,
.flex_block_columns.columns_3 li,
.flex_block_columns.columns_4 li,
.flex_block_columns.columns_5 li,
.flex_block_columns.columns_6 li{
width: 100%;
}
.h1title{
text-align: center;
max-width: 400px;
margin: auto auto;
margin-bottom: 0px;
padding-bottom: 50px;
}
.exzellenteswebdesign {
padding-top: 40px;
}
.dienstleistungbox .section-content{
max-width: 500px;
margin: auto auto;
}
.dienstleistungbox .section-content h3,
.dienstleistungbox .section-content .text{
text-align: center;
}
.contactform-help span[data-name="your-company"]:before, 
.contactform-help span[data-name="your-phone"]:before, 
.contactform-help span[data-name="your-name"]:before, 
.contactform-help span[data-name="your-email"]:before, 
.contactform-help span[data-name="your-message"]:before{
width: 30px;
height: 30px;
}
.contactform-help span[data-name="your-phone"]:before, 
.contactform-help span[data-name="your-company"]:before, 
.contactform-help span[data-name="your-name"]:before, 
.contactform-help span[data-name="your-email"]:before, 
.contactform-help span[data-name="your-message"]:before{
top: 15px;
left: 20px;
}
.contactform-help textarea, 
.contactform-help input[type="text"], 
.contactform-help input[type="tel"], 
.contactform-help input[type="email"]{
padding-left: 70px;
}
.kontaktformular-box form .width100{
margin-bottom: 0px;
}
.exzellenteswebdesign .text-content{
max-width: 500px;
margin: auto auto;
text-align: center;
}
.projektheader_titel h1{
font-size: 35px;
}
.marquee .contItem{
padding: 15px;
}
.textundblocks-box .tub_blocks_wrapper .item .item-content{
padding: 20px;
}
}
@media(max-width: 720px){
.contactinfobox .titel br{
display: block;
}
.contactinfobox .titel{
font-size: 100px;
}
}
@media(max-width: 700px){
.projektheader_titel h1{
font-size: 30px;
}
.projektheader_description{
max-width: 250px;
}
}
@media(max-width: 650px){
.textundblocks-box .tub_blocks_wrapper .item{
width: calc(100%);
}
.textundblocks-box .tub_blocks_wrapper .item .item-content{
display: flex;
flex-wrap: wrap;
}
.textundblocks-box .tub_blocks_wrapper .item .text{
width: calc(100% - 40px);
padding-left: 40px;
}
}
@media(max-width: 600px){
.projektheader_content{
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.projektheader_content .projektnavigation{
order: 2;
margin-top: 30px;
}
.single-leistungen-nav ul li:nth-child(1) a{
padding-top: 70%;
}
.single-leistungen-nav ul{
display: block;
}
.single-leistungen-nav ul li{
margin-bottom: 10px;
}
.single-referenzbilder-nav .text .text-content strong{
padding: 10px 10px;
max-width: calc(100% - 30px)
}
.single .single-referenzbilder-nav .spaltenbild{
padding-top: 100%;
}
.projekttitleinfo{
text-align: center;
}
.projektheader_description{
text-align: center;
}
.projektheader_titel h1{
text-align: center !important;
padding-right: 0px !important;
}
.projektheader_titel{
padding-right: 0px;
}
.projektnavigation{
padding-left: 0px;
justify-content: center;
margin-bottom: 10px;
}
#colophon .footer-newsletter-forms{
display: block;
}
#colophon .footer-newsletter input[type="email"]{
border-right: 1px solid #fff;
border-bottom: none;
}
#colophon .footer-newsletter input[type="submit"]{
width: 100%;
}
.projektheader_content .width50{
width: 100%;
max-width: none;
}
.projektheader_description{
max-width: none;
padding-left: 0px;
}
.projektheader_titel h1{
text-align: left;
margin-bottom: 20px;
}
}
@media(max-width: 550px){
.multi-button-wrapper a{
width: 100%;
}
}
@media(max-width: 480px){
.container-box,
.single .section-content{
padding-left: 15px;
padding-right: 15px;
}
.leistungen-home h2.spalten-titel{
padding-right: calc(100px * 0.5);
}
.leistungen-home .spaltenbild{
position: absolute;
right: calc(40px * 0.5);
top: calc(-30px * 0.5);
width: calc(90px * 0.5);
}
.section-content{
padding-left: 15px;
padding-right: 15px;
}
.contactinfobox .titel{
font-size: 100px;
}
.textundblocks-box .tub_blocks_text .titlecontent{
margin-bottom: 20px;
}
form .width50, form .width100{
margin-bottom: 10px;
}
.wpcf7-form-control-wrap{
margin-bottom: 10px;
}
.single-referenzbilder-nav .text .text-content strong{
hyphens: auto;
}
.gridgalerie-box .image-wrapper .image:first-child{
padding-top: 150%;
}
.gridgalerie-box .image-wrapper .image:nth-child(4){
padding-top: 50%;
}
.galerie-box.bunnyimage .spaltenbild{
padding-top: 100% !important;
}
.marquee .contItem{
padding: 10px;
}
}
@media(max-width: 450px){
.contactinfobox .titel{
font-size: 75px;
}
}