#masthead{

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	height: 80px;
	width: 100%;
	top: 0px;
}


a{
	cursor: url(https://wolpermedia.de/wp-content/themes/flexawesomebygalano/images/handcursor.svg), auto;
}



.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;
	
}

#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;
}


.leistungcarousel .box{
	overflow: hidden;
}

/*--- Navigation ---*/


#additional-top-menu{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	line-height: 100%;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	padding-top: 20px;
	justify-content: center;
}
#additional-top-menu ul li a{
	font-weight: normal;
	display: block;
	line-height: 100%;
	font-size: 14px;
	padding-left: 15px;
	padding-right: 15px;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0px;
	text-transform: uppercase;
	letter-spacing: 4px;
}
#additional-top-menu ul li:last-child a{
	border-right: none;
}
#additional-top-menu ul li a{
	border-right: 1px solid #fff;
}


.toggle-menu {
	right: 30px;
	top: 30px;
	width: 40px;
	height: 25px;
	position: absolute;
	cursor: pointer;
	transition: 0.5s;
}

.toggle-menu .stroke-1,
.toggle-menu .stroke-2,
.toggle-menu .stroke-3 {
	height: 3px;
	width: 100%;
	background-color: #fff;
	position: absolute;
	transition: 0.5s;
	border-radius: 9999px;
}

.toggle-menu .stroke-1 {	
	top: 0px;
}
.toggle-menu .stroke-2 {	
	top: 50%;
	transform: translateY(-50%);
	width: 80%;
}
.toggle-menu:hover .stroke-2{
	width: 100%;
}

.toggle-menu .stroke-3 {
	bottom: 0px;
}




.close{
	color: #fff;
	border: 3px solid #fff;
	border-radius: 9999px;
	padding: 10px;
	line-height: 100%;
	width: 40px;
	height: 40px;
	text-align: center;
	text-shadow: 3px 3px rgba(0,0,0,1);
	margin: auto auto;
	cursor: pointer;
	position: fixed;
	margin-bottom: 20px;
	right: 30px;
	top: 25px;
	display: none;
	z-index: 1;
	
}
.close:after{
	content: "";
	display: block;
	height: 50%;
	width: 50%;
	position: absolute;
	background-color: #fff;
	-webkit-mask-image: url(images/close-nav.svg);
    mask-image: url(images/close-nav.svg);
	-webkit-mask-size: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%); 
}

@keyframes rotateClose{
	from {  transform: rotate(0deg);}
    to   {  transform: rotate(270deg);}
}
.close.rotate{
	animation-name: rotateClose;
	animation-duration: 1s;
}
.close .close-content{
	position: absolute;
	left: 50%; 
	top: 50%;
	transform: translate(-50%, -50%);
	text-indent: -9999px;
}
.primary-navigation-wrapper{
	
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;	
	padding: 40px 20px;
	overflow: scroll;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-size: cover;
	display: none;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cf077e+0,f07e23+100 */
/* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#324359+0,251f37+100 */
/* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#2a2e49+0,251f37+100 */
background: radial-gradient(ellipse at center,  #2a2e49 0%,#251f37 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}




.primary-navigation-wrapper::-webkit-scrollbar{
	display: none;
}
@keyframes sliderUpPrimary{
	from {  top: 80px; }
    to   {  top: 0px; }
}
@keyframes slideLeft{
	from {  right: -50px; }
    to   {  right: 0px; }
}

.primary-navigation-wrapper .primary-navigation-content{	
	align-self: center;	
	z-index: 1;
}
.primary-navigation-wrapper .slideUp{
	position: relative;
	animation-name: sliderUpPrimary;
	animation-duration: 1s;
}
#primary-navigation{
	max-width: 500px;
}


#primary-navigation ul li{
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#primary-navigation ul li a {
    color: #fff;
	padding-top: 22px;
	padding-bottom: 22px;
	line-height: 100%;
	
	font-size: 20px;
	letter-spacing: 1px;
    color: #fff;
    display: block;
	line-height: 80%;
	color: rgba(0,0,0,0);
	font-size: 45px;
	letter-spacing: 2px;
	color: #fff;
	
}
#primary-navigation ul li.menu-item-has-children a {
    padding-left: 25px;
}

#primary-navigation ul li li{
	margin-bottom: 10px;
	margin-top: 10px;
}


#primary-navigation ul li.current-menu-item a{

}


#phone-head{
	position: absolute;
	right: 100px;
	top: 0px;
	height: 80px;
	color: #fff;
	
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	line-height: 100%;
	font-size: 20px;
	letter-spacing: 1px;
	padding-top: 5px;
}
#phone-head a{
	color: #fff;
	display: flex;
	font-size: 16px;
	line-height: 100%;
	align-items: center;
}

#phone-head a:after{
	content: "";
	width: 40px;
	height: 40px;
	display: block;
	background: #fff;
	-webkit-mask-image:url(images/phone-3.svg);
	mask-image: url(images/phone-3.svg);
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: contain;
	mask-size: contain;
	margin-left: 10px;
}


@keyframes hoverLetter{
	0%  { letter-spacing: 1px;}
	50% { letter-spacing: 3px;  }
	100% {  letter-spacing: 1px; }
}







@keyframes togglelinerotate{
	from{height: 100%;}
	to{height: 0;}
}
@keyframes fillline1{
	from{height: 0%;}
	to{height: 100%;}
}
@keyframes fillline2{
	from{width: 0%;}
	to{width: 100%;}
}

#primary-navigation .toggle-subemenu .line1{
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	width: 2px;
	height: 90%;
	transform: translate(-50%, -50%);
	position: relative;
}



#primary-navigation .toggle-subemenu.active .line1{
	animation: togglelinerotate 0.3s;
	animation-fill-mode: forwards;

}
#primary-navigation .toggle-subemenu .line2{
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	height: 2px;
	width: 90%;
	transform: translate(-50%, -50%);
}



#primary-navigation .toggle-subemenu.active{
	transform: rotate(-180deg);
}


.primary-navigation-call{
	color: #fff;
	text-align: center;
	margin-top: 40px;
	letter-spacing: 5px;
	text-transform: uppercase;
}
.primary-navigation-call a{
	color: #fff;
}
.primary-navigation-call a:hover{
	color: #FF6700;
}

#top{
	background: #222;
	font-size: 14px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
}
#top li{
	display: inline-block;
	padding-right: 10px;
	padding-left: 10px;
	border-right: 1px solid #fff;
	line-height: 100%;
}
#top li:last-child{
	border-right: none;
}
#top a{
	color: #fff;
	display: inline-block;
	line-height: 100%;
	letter-spacing: 2px;
	text-transform: uppercase;
	
}



#headnavigation{
	height: 100px;
}

header#masthead {
    padding: 0px;
	position: fixed;

	z-index: 2000;
	width: 100%;
	top: 0px;

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	height: 80px;
}
header#masthead{
	padding: 0px;
	
}
header#masthead .masthead-scroll-background{
	width: 100%;
	height: 100%;
	bottom: 100%;
	background: rgba(0,0,0,0.8);
	position: absolute;
	transition: all 0.3s;
}
header#masthead.sticky .masthead-scroll-background{
	bottom: 0;
}

header#masthead.fixed {
	position: fixed;
	background: none;
}
header#masthead.sticky{
	min-height: 80px;
}
.movecontainer{
	margin-top: -130px;
}
 


.nav-bgvideo{
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 top: 0px;
	 object-fit: cover;
	opacity: 0.7;
	 -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	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-next{
	mask: url(images/arrow-right.svg);
	-webkit-mask: url(images/arrow-right.svg);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-size: contain;
	background-color: blue;
	
}
.swiper-button-prev, 
.swiper-container-rtl .swiper-button-prev{
	mask: url(images/arrow-left.svg);
	-webkit-mask: url(images/arrow-left.svg);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-size: contain;
	background-color: blue;
}

.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;
}



.slider {
  height: 60px;
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;

}


/*  IMPORTANT CODE BELOW */


.slide-track2 {
  width: calc(355px * 15);
  display: flex;
  animation: scroll2 15s linear infinite;
  justify-content: space-between;
}

.slide {
  width: 355px;
  height: 60px;
	padding-left: 20px;
	padding-right: 20px;
  display: grid;
  place-items: center;
  transition:0.5s;
  cursor:pointer;
}
.slide img{
	width: 100%;
	display: block;

}
/*
.slide:hover{
  transform:scale(0.8)
}*/


@keyframes scroll {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-355px * 10));
  }
}

@keyframes scroll2 {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-255px * 5));
  }
}

.aktuelles-box .item-content.box{
	display: flex;
	flex-wrap: wrap;
}
.aktuelles-box .item,
.aktuelles-box .item-content{
	border-radius: 5px;
	align-items: center;
}
.aktuelles-box .image{
	width: 40%;
}
.aktuelles-box .text{
	width: 60%;
	padding-left: 30px;
}

.oeffnungszeiten th{
	text-align: left;
	padding-right: 20px;
}
.aktuelles-box .item-content.box{
	align-items: center;
}
#footer-navigation,
#footer-navigation .nav-menu,
#footer-navigation .nav-menu ul{
	width: 100%;
}
#footer-navigation .nav-menu ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#footer-navigation .nav-menu ul li a{
	padding-left: 20px;
	padding-right: 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));
    }
  }
}


#primary-navigation{	

}
#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);
}

.nummer{
	display: block !important;
	
}

.nummer[data-aos^="fade"][data-aos^="fade"] {
	opacity: 1.0 !important;
}


.carousel-box .flexibleheight img{
	object-fit: contain !important;
}

.progress-bar-wrapper {
  position: fixed;
  top: 0;
  z-index: 10000;
  width: 100%;
}


.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(images/quotation-mark.svg) no-repeat center center;
	background-size: contain;
	left: 350px;
}
/*
.reviews-box .text:after{
	content: "";
	position: absolute;
	width: 80px;
	height: 80px;
	bottom: -50px;
	right: 80px;
	background: url(images/talking-bubble.svg) no-repeat right bottom;
	z-index: 3;
}*/
.reviews-box .item{
	padding-bottom: 100px !important;
}

.reviews-box .text{
	border-radius: 10px;
}


.reviews-box .item-content{
	padding-top: 20px;
}

.reviews-box .spalten-titel{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2b826+0,f0c526+100 */
	background: rgb(242,184,38); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(242,184,38,1) 0%, rgba(240,197,38,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(242,184,38,1) 0%,rgba(240,197,38,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(242,184,38,1) 0%,rgba(240,197,38,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b826', endColorstr='#f0c526',GradientType=1 ); /* IE6-9 */
	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(images/date-arrow-right.svg) no-repeat ;
	background-size: 100% 100%;
	top: 0px;
}

/*
.reviews-box .spalten-titel:before{
	content: "";
	width: 10px;
	height: 10px;
	position: absolute;
	left: 0px;
	bottom: -10px;
	background: url(images/date-arrow-left-small.svg) no-repeat;
}*/
.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;
	/*position: absolute;*/
	z-index: 5;
	left: 50%;
	/* transform: translateX(-50%); */
	/* top: 280px; */
	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;
	max-width: calc(100% - 40px);
}

.projekte-box .section-content .content{
	padding-left: 0px !important;
	padding-right: 0px !important;	
}


	

.projekte-box  .text {
	left: 0px;
	top: 0px;
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b9157e+0,f29024+100 */
	background: linear-gradient(to right,  rgba(185,21,126,0.95) 0%,rgba(242,144,36,0.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	align-items: center;
	justify-content: center;
	display: none;
}
.projekte-box .box{
	border-radius: 1em;
	overflow: hidden;
}
.projekte-box .box:hover .text{
	display: block;
}


.projekte-box  .text .text-content {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	
}

.projekte-box .spalten-titel{
	max-width: 400px;
	padding-left: 20px;
	padding: 20px 20px;
	right: 0px;
	bottom: 0px;
	position: relative;
	width: 90%;
	
	color: #fff;
	text-align: center;
	font-weight: normal;
	letter-spacing: 3px;
	line-height: 120%;
}



.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; 
} 
	
  
.projekte-box .box:hover .spalten-titel:before { 
	animation: borderanimate 0.5s linear forwards; 
} 

@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; 
} 

.projekte-box .box:hover .spalten-titel:after { 
	animation: borderanimate2 0.5s linear forwards; 
} 

@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; 
	} 
} 


.projekte-box .box:hover .spalten-titel{
	/*animation: zoomtext 0.5s linear forwards; */
}


@keyframes zoomtext {
	0% { 
		transform: scale(0.6);
	}
	100% { 
		transform: scale(1);
	}
} 
  
  

#colophon .content{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding-left: 40px;
	padding-right: 40px;
}
#colophon .footer-logo-nav{
	width: calc(100% - 700px);
	margin-bottom: 40px;
}

#colophon .width100{
	width: 100%;
}

 
  
#colophon .footer-logo img{
	width: 240px;
} 

#colophon .footer-newsletter-menu{
	width: calc(100% - 500px);
}
#colophon .footer-newsletter{
	width: 700px;
	color: #fff;
}
#colophon .footer-newsletter input[type="email"]{
	width: 100%;
	padding: 15px 20px;
	background: none;
	border: 1px solid #ddd;
	font-size: 20px;
	color: #ddd;
	border-radius: none;
	border-right: none;

}
#colophon #menu-footer{
	justify-content: left;
}
#colophon .footer-newsletter input[type="submit"]{
	border: 1px solid #ddd;
	background: none;
	color: #ddd;
	padding: 15px 20px;
	font-size: 20px;
	border-radius: none;
}
#colophon .footer-newsletter .footer-newsletter-header{
	
	font-size: 30px;
	letter-spacing: 1px;
	margin-bottom: 8px;
	margin-bottom: 15px;
}
#colophon .footer-newsletter-forms{
	display: flex;
}
#colophon .footer-nav-menu{
	
	font-size: 20px;
}
#colophon .footer-nav-menu li{
	margin-bottom: 20px;
	width: 100%;
}
#colophon .footer-nav-menu{
	columns: 1;
	max-width: 600px;
}
#colophon .footer-nav-menu a{
	color: #fff;
	line-height: 130%;
}
#colophon ul li{
	padding-left: 0px;
	padding-right: 0px;
}

h1{
	/*
	background: -webkit-linear-gradient(#C42D6C, #ED842D);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;*/
}




@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;
}





/*
@keyframes textclip {
	to { 
		background-position: left center;
		
	}
}
@keyframes scaler {
	to { 
		transform: scale(1);
		
	}
}*/



form .width50,
form .width100{
	margin-right: 25px;
	margin-left: 25px;
}
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: 45px;
	height: 45px;
	background: red;
	top: 15px;
	z-index: 1;
}

.contactform-help span[data-name="your-company"]:before{
	-webkit-mask:url(images/icon-company.svg) center center;
	mask: url(images/icon-company.svg) center center;
	background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.contactform-help span[data-name="your-phone"]:before{
	-webkit-mask:url(images/icon-telephone.svg) center center;
	mask: url(images/icon-telephone.svg) center center;
	background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.contactform-help span[data-name="your-name"]:before{
	-webkit-mask:url(images/icon-name.svg) center center;
	mask: url(images/icon-name.svg) center center;
	background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.contactform-help span[data-name="your-email"]:before{
	-webkit-mask:url(images/icon-mail.svg) center center;
	mask: url(images/icon-mail.svg) center center;
	background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.contactform-help span[data-name="your-message"]:before{
	-webkit-mask:url(images/icon-message.svg) center center;
	mask: url(images/icon-message.svg) center center;
	background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.contactform-help h2{
  display: flex;
  justify-content: center;

}
.contactform-help h2 .titel{
color: #fff;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .05em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .05em; /* Adjust as needed */
  animation: 
    typing 8s steps(20, end) infinite,
    blink-caret .5s step-end infinite;
  width: 900px;
}


/* The typing effect */
@keyframes typing {
 0% { width: 0 }
 30% { width: 900px }
 60% { width: 900px }
 100% { width: 0 }
}

/* The typewriter cursor effect */
@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;
} 




	

.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%
	transform: translateX(-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(images/right-arrow.svg);
	-webkit-mask-image: url(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;
}


@media(max-width: 1500px){

	/*
	.dienstleistungbox .section-content .spaltenbild{
		max-width: 500px;
		margin: auto auto;
		width: 100% !important;
		max-width: 1000px  !important;
		display: flex;
		justify-content: center;
	}
	
	.dienstleistungbox.icon-on-the-left .text{
		width: 100% !important;
		padding-left: 0px;
	}
	.dienstleistungbox.icon-on-the-left svg{
		max-width: 100px;
		margin: auto auto;
		margin-bottom: 25px;
	}*/
}

@media(max-width: 1200px){
	

	
	
	
	.swiper-button-prev, .swiper-button-next{
		width: 50px;
		height: 50px;
	}
	
	.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;
}



.overflowhidden{
	overflow: hidden;
}
.aboutbox .item{
	position: relative;
}
.aboutbox .item:after{
	content: "";
	background: url(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;
}


/* Hide scrollbar for Chrome, Safari and Opera */
textarea::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
textarea {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  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;
}



.contactform-help span[data-name="your-message"]:before{
	
}

.kontaktformular-box#kontaktformular-block_c5fa4e316d9be666a847583b753893d1 textarea{
	 -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.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 .wpcf7-acceptance{
	border: none !important;
	background: #000;
	padding: 20px;
	max-width: 860px;
	margin: auto auto;
	
	
}

.kontaktformular-box .button-fa{
	position: relative;
	max-width: 200px;
	margin: auto auto;
	
}
.kontaktformular-box .button-fa{
	border-radius: 9999px;
}




.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-bottom-width: 4px;
	border-bottom-style: solid;
	border-image: linear-gradient(to right, #EC8C39, #F53270) 1;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 70px;
	position: relative;
}

form .width50,
form .width100{
	margin-right: 25px;
	margin-left: 25px;
}
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(images/icon-name.svg) center center;
	mask: url(images/icon-name.svg) center center;
	background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#angebotanfordern span[data-name="your-email"]:before{
	-webkit-mask:url(images/icon-mail.svg) center center;
	mask: url(images/icon-mail.svg) center center;
	background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#angebotanfordern span[data-name="your-message"]:before{
	-webkit-mask:url(images/icon-message.svg) center center;
	mask: url(images/icon-message.svg) center center;
	background: linear-gradient(to bottom,  rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}



.contactinfobox .titel{
	font-size: 150px;
	line-height: 80%;
}








.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: 10px;
}
.seeyousoonbox h2{
	font-size: 12vw !important;
	  text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}


.cards {
  height: 100%;
  overflow: auto;
  
  &--inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200%;
  }
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: #fff;
  height: 200px;
  width: 300px;
  margin: 20px;
  transform: translateY(var(--translateY));
	will-change: transform;
}

.blur1px{
	filter: blur(1px);	
}

.dienstleistungbox {
	border-bottom: 1px solid #000;
}

.projekte-box .section-content .content{
	padding-left: 40px;
	padding-right: 40px;
}


.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;
	/* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#bf2374+0,f08d26+100 */
}

.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;
}




.exzellenteswebdesign{
	z-index: 10;
	position: relative;
}

.spaltenbild svg{
	width: 100%; 
	height: auto;
}





.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: 10px;
}
.servicedescription_header .servicedescription_text{
	padding-top: 120px;
	padding-bottom: 120px;
	padding-left: 50%;
	z-index: 1;
	
}
.servicedescription_text_content{
	background: #000;
	padding: 10%;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c32a70+0,ee872b+100 */
	background: linear-gradient(135deg,  rgba(195,42,112,1) 0%,rgba(238,135,43,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-radius: 10px;
}

.servicedescription_text h1{
	font-size: 50px;
	line-height: 90%;
}
.servicedescription_text h2{
	font-size: 30px;
}
.servicedescription_text a{
	background: #fff;
	padding: 20px 30px;
	display: block;
	color: #000;
	border-radius: 9999px;
	letter-spacing: 1px;
	line-height: 100%;
	text-align: center;
}


.single #angebotanfordern{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c32a70+0,ee872b+100 */
	background: linear-gradient(135deg,  rgba(195,42,112,1) 0%,rgba(238,135,43,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


.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;
	font-weight: normal;
	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%;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+100&0+0,1+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: 10px;
	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-size: 35px;
	font-weight: normal;
}

.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;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 60px;
	
}
#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: 10px;
	overflow: hidden;
	padding: 20px;
}
.archive-leistungen-nav li a{
	border-radius: 10px;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	padding-top: 100%;
	position: relative;
}
.archive-leistungen-nav li a strong {
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding: 60px 20px 20px 20px;
	font-weight: normal;
	color: #fff;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	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);
}





.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: 10px;
}



.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{
	padding: 40px;
	border-radius: 20px;
	/* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#eb8f36+0,ef5f53+100 */
	background: linear-gradient(to right,  #eb8f36 0%,#ef5f53 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	width: calc(50% - 25px);
}
.textundblocks-box .tub_blocks_wrapper .item:last-child{
	width: 100%;
}
.textundblocks-box .tub_blocks_wrapper .item .image{
	max-width: 60px;
	margin-bottom: 20px;
}
.textundblocks-box .tub_blocks_wrapper .item .spalten-titel{
	font-size: 40px;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 3px;
}
.textundblocks-box .tub_blocks_wrapper .item{
	font-size: 24px;
}

.textundblocks-box .tub_blocks_text .titlecontent{
	font-size: 100px;
	line-height: 80%;
	font-weight: 400;
	letter-spacing: 2px;
	padding-right: 20px;
}

.textundblocks-box .tub_blocks_wrapper{
	grid-gap: 50px;
}
.textundblocks-box .tub_blocks_wrapper .item{
	display: flex;
}
.textundblocks-box .tub_blocks_wrapper .item .item-content{
	align-self: flex-end;
}
.textundblocks-box .tub_blocks_wrapper .item p{
	margin-bottom: 0px;
}
.textundblocks-box .tub_blocks_wrapper a{
	color: #fff;
	padding-right: 50px;
	background: url(images/long-arrow-right.svg) no-repeat;
	background-size: 35px auto;
	background-position: right 18px;
	transition: all 0.3s;
}
.textundblocks-box .tub_blocks_wrapper a:hover{
	background-position: left 18px;
	padding-left: 50px;
	padding-right: 0px;
}






#more-leistungen{
	background: #111;
}

.brlbs-cmpnt-dialog-entrance-description{
	height: 200px !important;
	overflow-y: scroll;
}




.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;
}




.spalten-box  .item.swiper-slide .spaltenbild{
	margin-bottom: 0px;
}





.wpcf7-spinner{
	position: absolute;
}


.page-id-4513 #content{
	overflow: inherit;
}
.page-id-4513 section{
	top: 0px;
}








@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%;
		max-width: 850px;
		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%;
	}
}



@media(max-width: 1200px){
	

	.projekte-box .spalten-titel{
			font-size: 28px;
			line-height: 32px;
		}
	
	
	
	.seeyousoonbox  .content{
		max-width: 750px;
	}
}

@media(max-width: 1100px){
	

	
	#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){
	
	

	

	
	
	
	.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;
	}

	
}
@media(max-width: 1000px){
	section.contactinfobox.textundblocks-box .tub_blocks_wrapper{
		display: block;
	}
	section.contactinfobox.textundblocks-box .tub_blocks_wrapper .item{
		width: 100%;
		margin-bottom: 20px;
	}
	section.contactinfobox.textundblocks-box .tub_blocks_wrapper .item .item-content{
		width: 100%;
	}
}




@media(max-width: 920px){
	form .width50, form .width100{
		width: 100%;
	}
	.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 textarea, 
	.contactform-help input[type="tel"], 
	.contactform-help input[type="text"], 
	.contactform-help input[type="email"]{
		padding-top: 10px;
		padding-bottom: 10px;
	}

	






	.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){
	
		

	
	
	
	.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: 40px;
		height: 40px;
	}
	.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: 0px;
		left: 0;
	}
		
	.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;
	}
	

	
}

@media(max-width: 720px){
	.contactinfobox .titel br{
		display: block;
	}
	.contactinfobox .titel{
		font-size: 120px;
	}
	.textundblocks-box .tub_blocks_text .titlecontent{
		margin-bottom: -40px;
	}

	
}




@media(max-width: 700px){
	.projektheader_titel h1{
		font-size: 30px;
	}
	.projektheader_description{
		max-width: 250px;
	}
}

@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){
	
	.section-content{
		padding-left: 35px;
		padding-right: 35px;
	}
}


@media(max-width: 480px){
		
	.header-box .text-wrapper{
		padding-top: 130px;
	}
	.section-content{
		padding-left: 25px;
		padding-right: 25px;
	}
	.must-have-box .item-content .text .text-content{
		padding: 30px;
	}
	.must-have-box .item-content .text{
		width: calc(100% - 48px) !important;
	}
	
	
	.textundblocks-box .tub_blocks_wrapper a{
		background-position: right 15px;
	}
	
	.textundblocks-box .tub_blocks_wrapper .item{
		padding: 30px;
	}
	.textundblocks-box .tub_blocks_wrapper .item .image{
		max-width: 50px;
		margin-bottom: 10px;
	}
	.textundblocks-box .tub_blocks_wrapper .item .spalten-titel{
		font-size: 30px;
	}
	.textundblocks-box .tub_blocks_wrapper .item .text-detail{
		font-size: 20px;
	}
	
	.contactinfobox .titel{
		font-size: 100px;
	}
	.textundblocks-box .tub_blocks_text .titlecontent{
		margin-bottom: -32px;
	}
	
	#primary-navigation .toggle-subemenu{
		top: 30px;
		margin-left: 0px;
	}

	.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;
	}

	.nav-logo,
	#logo{
		padding-left: 5px;
		width: 60px;
	}
	.close,
	.toggle-menu{
		top: 20px;
		right: 20px;
	}
	#primary-navigation ul li  a{
		font-size: 60px !important;
	}
	#primary-navigation ul li li a{
		font-size: 22px !important;
		letter-spacing: 1px !important;
	}
	.primary-navigation-call{
		font-size: 14px;
		letter-spacing: 1px;
	}
	.marquee .contItem{
		padding: 10px;
	}
	.primary-navigation-wrapper{
		padding-top: 55px;
	}
}

@media(max-width: 420px){
	
	#primary-navigation ul li a{
		font-size: 50px !important;
	}
	#primary-navigation ul li li a{
		font-size: 18px !important;
	}
	.primary-navigation-wrapper{
		padding-left: 20px;
		padding-right: 20px;
	}
	#primary-navigation .toggle-subemenu{
		width: 20px;
		height: 20px;
	}
}


@media(max-width: 350px){
	#primary-navigation ul li a{
		font-size: 40px;
		padding-top: 18px;
		padding-bottom: 18px;
	}
}