@charset "utf-8";
/* CSS Document */
/* TM SALES GmbH */
/* Copyright 2025 Hoppe Websolutions */
/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v18-latin-100.eot'); /* IE9 Compat Modes */
  src: local('Roboto Thin'), local('Roboto-Thin'),
       url('../fonts/roboto-v18-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v18-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v18-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../fonts/roboto-v18-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* Normalize html */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
a {
  background-color: transparent;
}
b,
strong {
  font-weight: 500;
}
small {
  font-size: 80%;
}
img {
  border-style: none;
}
[hidden] {
  display: none;
}
/************************************/
.js .fakeloader {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background-color: #1a1a1a;
}
.clearfix { zoom:1; }
.clearfix:before, .clearfix:after {
	content:"\0020";
	display:block;
	height:0;
	overflow:hidden;
}
.clearfix:after { clear:both; }
.preload * {
	transition: none !important;
}
span.nobreak {
	white-space: nowrap;
}
.red {
	color: #F00;
}
html {
	height: 100%;
	overflow-y: scroll !important;
	font-size: 100%;
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
body {
	font-family: 'Roboto', sans-serif;
	line-height: 1.7;
	color: #8b8786;
	font-weight: 400;
}
#datenschutz, #sonderposten {
	overflow-wrap: break-word;
}

/* Klassen für Animationen */
.hidden {
	opacity: 0 !important;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.delay-05s {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;	
}
.duration-1s {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;	
}
.duration-5s {
    -webkit-animation-duration: 5s;
    animation-duration: 5s;	
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}
/*****************************/
span.not_mobile {
	display: none;
}
div.not_mobile {
	display: none;
}
#header-top {
	width: 100%;
	padding: 0;
	margin: 0 auto;
	background-color: #FFF;
	/*background-color: #FCC;*/
	z-index: 1;
	height: auto;
	line-height: 0;
	top: 0px;
	left: 0px;
	height: 104px;
}
.header-shadow {
	box-shadow: 0 0 30px 0 rgba(0,0,0,.1);
}
#navbgd {
	background-color: #FFF;
	/*background-color: #FCC;*/
	height: 78px;
	line-height: 0;
	padding: 0;
	margin: 0;
	z-index: -1;
	width: 100%;
}
/* Korrektur Position Fly-Out-Navigation Smartphone-Ansicht */
.p7PM3.responsive ul {
	top: 78px;
}
section, section.first_section {
	padding: 2em 0;
	position: relative;
	background-color: #FFF;
}
.gray_light {
	background-color: #f3f3f3;
}
p {
	font-size: 1em;
	margin: 0;
	padding: 0 0 1em 0;
}
ul, ol, dt {
	font-size: 1em;
	margin: 0 0 1em 0;
}
h1, h2, h3, h4 {
	line-height: 1.3;
	font-family: 'Roboto', sans-serif;	
	margin: 0;
	padding: 0 0 0.5em 0;
}
h1 {
	padding-bottom: 0.25em;
}
h2 {
	padding-top: 0.5em;
}
h3, h4 {
	line-height: 1.4;
	padding: 0 0 0.5em 0;
}
h1 {
	font-size: 1.5em;
	line-height: 1.2;
	font-weight: 300;
	text-shadow: 0px 0.03em 0.08em rgba(0,0,0,0.25);
	color: #565552;
}
h2 {
	font-weight: 300;
	text-shadow: 0px 0.03em 0.08em rgba(0,0,0,0.25);
	font-size: 1.25em;
	color: #565552;
}
h3 {
	font-size: 1.125em;
	font-weight: 300;
	color: #1a1a1a;
	color: #565552;
	text-shadow: 0px 0.03em 0.08em rgba(0,0,0,0.25);
}
h4 {
	font-size: 1em;
	font-weight: 300;
	text-transform: uppercase;
	color: #1a1a1a;
	color: #565552;
	text-shadow: 0px 0.03em 0.08em rgba(0,0,0,0.25);
}
/* Text-Links im Main Content */
a.text-link {
	text-decoration: none;
	color: #8b8786;
	padding: 0 0.25em;
	transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}
a.text-link:link {
	border-bottom: 0.1em solid #8b8786;
}
a.text-link:visited {
	border-bottom: 0.1em solid #8b8786;
}
a.text-link:hover, a.text-link:focus {
	border-bottom: 0.1em solid transparent;
}
a.text-link:active {
	border-bottom: 0.1em solid #8b8786;
}
.item h3 {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.item h3 a {
	color: #565552;
	text-decoration: none;
}
/* List-links item-boxes */
ul.text-links {
	list-style-type: none;
	padding: 0;
}
ul.text-links a {
	text-decoration: none;
	color: #777;
	font-size: 0.875em;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
ul.text-links a:link, ul.text-links a:visited {
	border-bottom: 0.1em solid #777;
}
ul.text-links a:hover, ul.text-links a:focus, ul.text-links a:active {
	border-bottom: 0.1em solid transparent;
}
/****************************/
#head {
	min-height: 6em;
	width: 100%;
	padding: 0;
	margin: 0;
}
#start #head {
	min-height: 70vh;
}
.navi-wrapper, .wrapper {
	width: 100%;
	margin: 0 auto;
}
.wrapper {
	padding: 0 1em;
}
#logo {
	position: absolute;
	float: left;
	width: auto;
	padding: 1.1em 1em;
	line-height: 0;
	z-index: 901;
}
figure {
	margin: 0;
}
figure img {
	width: 100%;
	height: auto;
}
#logo img {
	width: 200px;
	height: auto;
}

div.left, div.right {
	width: 100%;
	margin: 2em 0;
	text-align: center;
}
.right img, .left img {
	width: 60%;
	height: auto;
	max-width: 300px;
}
.dso-logo {
	width: 100%;
	margin: 1em 0;
	text-align: center;
}
.dso-logo img {
	width: 100%;
	max-width: 250px;
	height: auto;
}
#foot {
	margin: 0;
	padding: 0;
	background-color: #f3f3f3;
}
.copyright-wrapper {
	background-color: #565552;
}
.copyright-content {
	margin: 0 auto;
	padding: 4em 0;
	width: 80%;
	max-width: 1200px;
}
.copyright p, .submenu p {
	line-height: 0;
}	

/* Scroll To Top Scroll Funktion*/
#totop {
	position: fixed;
	bottom: 1em;
	right: 0.5em;
	width: 2.8em;
	height: 2.8em;	
	background-color: #457bd1;
	border-radius: 50%;
	display: none;
	opacity: 0.6;
	transition: border-color 0.5s linear, background-color 0.5s linear;
	z-index: 6;
}
#totop a {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	font-size: 1.2em;
	padding: 0.45em 1em 0.55em 1em;
	text-decoration: none !important;
	color: #FFF;
}
#totop:hover {
	opacity: 1;
}

#foot {
	position: relative;
	color: #F0F0F0;
	padding: 0;
	text-align: center;
	font-size: 1em;
	border-top: 1px solid #e0e0e0;
}
#foot .copyright {
	font-size: 0.8em;
}
.submenu {
	display: none;
}

.hamburger {
	display: block;
	float: right;
	margin: 15px 0 0 0;
}
.hamburger .line{
  width: 30px;
  height: 4px;
  background-color: #457bd1;
  display: block;
  margin: 8px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hamburger:hover{
  cursor: pointer;
}
#hamburger-1.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger-1.is-active .line:nth-child(1){
  -webkit-transform: translateY(11px) rotate(45deg);
  -ms-transform: translateY(11px) rotate(45deg);
  -o-transform: translateY(11px) rotate(45deg);
  transform: translateY(11px) rotate(45deg);
}

#hamburger-1.is-active .line:nth-child(3){
  -webkit-transform: translateY(-13px) rotate(-45deg);
  -ms-transform: translateY(-13px) rotate(-45deg);
  -o-transform: translateY(-13px) rotate(-45deg);
  transform: translateY(-13px) rotate(-45deg);
}
	
/* Slideshow */
.slideshow,
.slideshow:after {
    position: fixed;
	position: absolute;
    width: 100%;
	height: 70%;
	overflow: hidden;
    top: 60px;
    left: 0px;
    z-index: 0;
}
.slideshow:after {
	height: 100%;
	top: 0px;
/*	top: 0px;
	position: fixed;*/
	content: '';
	background: rgba(0,0,0,0.25);
}
.slideshow li {
	list-style: none;
}
.slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
	background-color: #rgba(0,0,0,0.5);
    background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
/*    -webkit-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;*/
    -webkit-animation: imageAnimation 24s linear infinite 0s;
    animation: imageAnimation 24s linear infinite 0s;	
}
.slideshow li div {
    z-index: 1000;
    position: absolute;
    left: 0px;
    width: 100%;
	top: 0px;
	bottom: 10vh;
	left: 0px;
	right: 0px;
	margin: auto;
	height: 0px;
    text-align: center;
    opacity: 0;
/*    -webkit-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s;*/
    -webkit-animation: titleAnimation 24s linear infinite 0s;
    animation: titleAnimation 24s linear infinite 0s;	
}
#antriebstechnik .header-photo, #elektromotoren .header-photo, #frequenzumrichter .header-photo, #sonderposten .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-antriebstechnik-s-min.jpg) top -10vw center no-repeat;
	background-size: cover;
}
#anlagentechnik .header-photo, #messtechnik .header-photo, #prozesspumpen .header-photo, #prozessventile .header-photo, #waermetauscher .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-anlagentechnik-s.jpg) top -10vw center no-repeat;
	background-size: cover;	
}
#dichtungstechnik .header-photo, #oem-dichtungen .header-photo, #dm-dichtungen .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-dichtungstechnik-s-min.jpg) top -10vw center no-repeat;
	background-size: cover;	
}
#homogenisatoren .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-homogenisatoren-s-min.jpg) top center no-repeat;
	background-size: cover;		
}
#homogenisatoren-produktion .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-homogenisatoren-produktion-s-min.jpg) top center no-repeat;
	background-size: cover;		
}
#labor-homogenisatoren .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-homogenisatoren-labor-s-min.jpg) top center no-repeat;
	background-size: cover;		
}
#hochdruck-homogenisatoren .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-homogenisatoren-hochdruck-s-min.jpg) top center no-repeat;
	background-size: cover;		
}
#pilotanlagen .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-pilotanlagen-homogenisatoren-s-min.jpg) center center no-repeat;
	background-size: cover;		
}
#services-homogenisatoren .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-homogenisatoren-labor-s-min.jpg) bottom center no-repeat;
	background-size: cover;		
}
#sterilwasser .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-sterilwasser-einheit-s-min.jpg) center center no-repeat;
	background-size: cover;		
}
#schaltschrankbau .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-schaltschrankbau-s-min.jpg) center center no-repeat;
	background-size: cover;		
}
#pumpen .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-pumpen-s-min.jpg) center center no-repeat;
	background-size: cover;		
}
#hochdruckpumpen .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-hochdruckpumpen-s-min.jpg) center center no-repeat;
	background-size: cover;		
}
#feststoffpumpen .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-feststoffpumpe-s-min.jpg) center center no-repeat;
	background-size: cover;		
}
#scherpumpen .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-scherpumpen-s-min.jpg) center center no-repeat;
	background-size: cover;		
}
#kolloidmuehlen .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-kolloidmuehlen-s-min.jpg) center center no-repeat;
	background-size: cover;		
}
#zentrifugalpumpen .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-zentrifugalpumpen-s-min.jpg) center center no-repeat;
	background-size: cover;		
}
#selbstansaugende-pumpen .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-pumpen-s-min.jpg) center center no-repeat;
	background-size: cover;		
}
#mischsysteme .header-photo {
	height: 40vh;
	min-height: 10em;
	background: url(../img/slider-mischsysteme-s-min.jpg) center center no-repeat;
	background-size: cover;		
}

.slideshow li div h3 {
  text-transform: none;
  /*text-shadow: 0px 0.03em 0.08em rgba(0,0,0,0.25);*/
  text-shadow: 0 0 0.2em rgba(0,0,0,0.25), 0 0 0.2em rgba(0,0,0,0.25), 0 0 0.2em rgba(0,0,0,0.25);
  font-weight: 400;
  padding: 0 5vmin;
  color: rgba(255,255,255, 1);
  font-size: 7vmin;
  line-height: 9vmin;
}
.slideshow li:nth-child(1) span {
	background-image: url(../img/slider-anlagentechnik-s.jpg);
}
.slideshow li:nth-child(2) span {
	background-image: url(../img/slider-homogenisatoren-s-min.jpg);
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
	background-image: url(../img/slider-antriebstechnik-s-min.jpg);
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
	background-image: url(../img/slider-dichtungstechnik-s-min.jpg);
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}
/*.slideshow li:nth-child(4) span {
	background-image: url(../img/slider-anlagentechnik-s.jpg);
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}
.slideshow li:nth-child(5) span {
	background-image: url(../img/slider-antriebstechnik-s-min.jpg);
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
.slideshow li:nth-child(6) span {
	background-image: url(../img/slider-dichtungstechnik-s-min.jpg);
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}*/
.slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
.slideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}
.slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}
/*.slideshow li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
.slideshow li:nth-child(6) div {
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}*/
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	}
	8% {
	    opacity: 1;
	    -webkit-transform: scale(1.025);
	}
	25% {
	    opacity: 1;
	}
	30% {
	    opacity: 0;
	}
	100% { opacity: 0 }
}

@keyframes imageAnimation { 
	0% {
	    opacity: 0;
	}
	8% {
	    opacity: 1;
		transform: scale(1.025);
	}
	25% {
	    opacity: 1;
	}
	30% {
	    opacity: 0;
	}
	100% { opacity: 0;
		transform: scale(1.2);
	 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
	0% {
	    opacity: 0;
	    -webkit-transform: translateY(-50px);
	}
	10% {
	    opacity: 1;
	    -webkit-transform: translateY(0px);
	}
	25% {
	    opacity: 1;
	    -webkit-transform: scale(1);
	}
	30% { opacity: 0 }
	35% {
	    opacity: 0;
	    -webkit-transform: scale(3);
	}
	100% { opacity: 0 }
}

@keyframes titleAnimation { 
	0% {
	    opacity: 0;
	    transform: translateY(-50px);
	}
	10% {
	    opacity: 1;
	    transform: translateY(0px);
	}
	25% {
	    opacity: 1;
	    transform: scale(1);
	}
	30% { opacity: 0 }
	35% {
	    opacity: 0;
	    transform: scale(3);
	}
	100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .slideshow li span {
	opacity: 1;
}
/* More Link Button */
p.more_button, p.close_button, p.contact_button {
	margin: 0.5em 0 1em 0;
	display: block;
	text-align: center;
}
p.contact_button {
	text-align: left;
}
.more_button a, .close_button a, .contact_button a {
	display: inline-block;
	background-color: #fe6f00;
	border-radius: 5px;
	padding: 0.4em 0.6em;
	color: #FFF;
	font-weight: 400;
	font-size: 0.8rem;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;	
	background: linear-gradient(to left, #457bd1 50%, #fff 50%);
	background-size: 210% 100%;
	background-position: right bottom;
	background-repeat: no-repeat;	
	border: 2px solid #457bd1;
	transition: all ease 0.3s;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);	
}
.contact_button a {
	padding: 0.6em 0.8em;
	font-size: 1rem;
}
.close_button a {
	padding: 0.5em 0.9em;
	border-radius: 8px;
	font-size: 1rem;
	background: #002695;
	border: 3px solid #eebd68;
}
.more_button a::after, .contact_button a::after {
	content: '\2009 \02794';
}
.more_button a:hover, .contact_button a:hover {
	background: linear-gradient(to left, #457bd1 50%, #fff 50%);
	background-size: 200% 100%;
	background-position: left bottom;
	background-repeat: no-repeat;		
	text-decoration: none;
	color: #457bd1;
}
.item {
	margin: 2em 0;
	padding: 0 0 0.5em 0;
	border-radius: 5px;
	background-color: #FFF;
	box-shadow: 0 22px 64px -20px rgba(0,0,0,.2), 0 0px 10px rgba(0,0,0,0.03);	
}
.item-text {
	text-align: center;
	padding: 1em;
}
.item figure {
	padding: 0;
	margin: 0 0 1em 0;
	text-align: center;
	position: relative;
	overflow: hidden;
	line-height: 0;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;	
}
.item figure img {
	width: 100%;
	max-width: 400px;
	height: auto;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	-moz-transform: scale(1.00);
	-ms-transform: scale(1.00);
	-webkit-transform: scale(1.00);
	transform: scale(1.00);	
}
.item figure img:hover {
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	transform: scale(1.05);	
}
.item figure a {
	line-height: 0;
}

/* The Overlay (background) */
.overlay {  
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
	background-color: rgba(0,0,0,0.95);
	background-size: auto;
    overflow-x: hidden;
	overflow-y: hidden;
    transition: 0.5s;
}
/* content inside the overlay */
.overlay-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	width: 100%;
}
/* The navigation links inside the overlay */
.overlay a {
    text-decoration: none;
    color: #FFF;
    display: inline-block;
    transition: 0.3s;
}
.overlay p {
	font-size: 5.5vmin;
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus, .overlay span.fax:hover, .overlay span.fax:focus {
    color: #457bd1;
}
.overlay-content h3 {
	font-weight: 500;
	font-size: 7vmin;
	text-transform: uppercase;
	color: #457bd1;
	letter-spacing: 0.125em;
	margin-bottom: 2vmin;
}
.overlay-content p {
	font-weight: 300;
	color: #FFF;
}
.overlay-content a span.fon {
	padding: 0.25em 0.5em 0.25em 1.5em;
	background: url(../img/phone-white.png) left center no-repeat;
	background-size: auto 70%;
	cursor: pointer;
}
.overlay-content a span.handy {
	padding: 0.25em 0.5em 0.25em 1.5em;
	background: url(../img/mobile-white.png) left center no-repeat;
	background-size: auto 75%;
	cursor: pointer;
}
.overlay-content span.fax {
	padding: 0.25em 0.5em 0.25em 1.5em;
	background: url(../img/fax-white.png) left center no-repeat;
	background-size: auto 70%;
	cursor: pointer;
}
.overlay-content a span.email {
	padding: 0.25em 0.5em 0.25em 1.5em;
	background: url(../img/mail-white.png) left center no-repeat;
	background-size: auto 70%;
	cursor: pointer;	
}
.overlay-content a span.location {
	padding: 0.25em 0.5em 0.25em 1.5em;
	background: url(../img/location-white.png) left center no-repeat;
	background-size: auto 70%;
	cursor: pointer;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
	right: 2vmin;
	top: 0;
	font-size: 12vmin;
	font-weight: 500;
	line-height: 1;
	color: rgba(255,255,255,1);
	cursor: pointer;
	z-index: 3001;
}
.overlay .closebtn:hover {
	color: rgba(69,123,209,1);	
}

/** Download Icon */
p.download, p.download_list {
	display: inline-block;
}
p.download_list {
	display: block;
	padding-bottom: 0.25em;
}
p.download a, p.download_list a {
	display: block;
	color: #457bd1;
	/*letter-spacing: 1px;*/
	font-weight: 500;
	/*text-transform: uppercase;*/
	background: url(../img/download-blue.png) left center no-repeat;
	background-size: 2em;
	padding: 0.5em 0.5em 0.5em 2.5em;
}
p.download a:hover, p.download_list a:hover {
	text-decoration: none;
}

/** Liste der sitemap **/
#sitemap #maincontent ul a {
	text-decoration: none;
	color: #8b8786;
	padding: 0 0.25em;
	transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}
#sitemap #maincontent ul a:link {
	border-bottom: 0.1em solid #8b8786;
}
#sitemap #maincontent ul a:visited {
	border-bottom: 0.1em solid #8b8786;
}
#sitemap #maincontent ul a:hover, #sitemap #maincontent ul a:focus {
	border-bottom: 0.1em solid transparent;
}
#sitemap #maincontent ul a:active {
	border-bottom: 0.1em solid #8b8786;
}

#sitemap #maincontent ul {
	padding-left: 0px;
}
#sitemap #maincontent ul li {
	list-style-type: none;
	margin-left: 1em;
}
#sitemap #maincontent ul li a {
	font-weight: 400;
}
#sitemap #maincontent ul ul {
	padding-left: 2em;
}
#sitemap #maincontent ul li li {
	list-style-type: circle;
}
#sitemap #maincontent ul li li a {
	font-weight: 300;
}
#sitemap #maincontent ul li li li {
	list-style-type: disc;
}
#sitemap #maincontent ul li li li li {
	list-style-type: circle;
}

/* External Links */
a[rel="noopener"]:after, span.ext_link {
	content: "\00a0\00a0\00a0\00a0\00a0";
	background-image: url(../img/external_link-dark.png);
	background-position: center right;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}
.overlay-content a[rel="noopener"]:after {
	background-image: url(../img/external_link-white.png);
}
/* Bilder */
.pics figure img {
	width: 100%;
	height: auto;
	padding: 1em 0;
}
table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}
/* Neu 2025 */
.anniversary {
	width: 100%;
	margin: 0.5em 0;
	text-align: center;	
	line-height: 0;
}
.anniversary img {
	width: 60%;
	max-width: 200px;
	height: auto;
	/*transform: rotate(-25deg);*/
}
/************************/
/* Smartphones with more than 320px width */
@media only screen and (min-width: 20em) {
	#navbgd {
		height: 104px;
	}	
	#logo {
		padding: 1.75em 1em;
	}	
	#logo img {
		width: 230px;
	}	
	.hamburger {
		margin: 30px 0.5em 0 0;
	}	
	/* Korrektur Position Fly-Out-Navigation Smartphone-Ansicht */
	.p7PM3.responsive ul {
		top: 104px;
	}	
}

/* Tablets/Smartphones with more than 640px width */
@media only screen and (min-width: 40em) {
	.wrapper {
		padding: 0 2em;
	}
	#logo {
		padding: 1.3em 1em;
	}
	#logo img {
		width: 300px;
	}	
	
	#maincontent div.link-button {
		text-align: center;
	}
	
	.items {
		margin: 2em 0;
	}
	.item {
		float: left;
		width: 47.5%;
		margin: 2em 5% 2em 0;
		border-radius: 5px;
		padding-top: 0;
	}
	.item:nth-of-type(2n+0) {
		margin-right: 0;
	}
	.item.last_odd {
		margin-left: 26.25%;
	}
	.item figure {
		max-height: 20em;
		display: flex;
		align-items: center;
	}
	.item figure a img {
		width: 100%;
		max-width: none;
	}	
	.item-text {
		padding-bottom: 0em;
	}
	.item-text p {
		font-size: 0.9375em;
		font-size: 0.875em;
	}
	
	/* 3 or 5 items: center last item  */
	.item.three:nth-of-type(3n+0), .item.five:nth-of-type(5n+0) {
		margin-left: 26.25%;
	}	
	
	/* Anpasung Kontaktdaten */
	.overlay p {
		font-size: 4.75vmin;
	}
	.overlay-content h3 {
		font-size: 6vmin;
	}	
}

@media only screen and (min-width: 50em) {	
	.items {
		margin: 1em 0;
	}
	.item.three, .item.five, .item.six {
		float: left;
		width: 31%;
		margin: 2em 3.5% 2em 0;
		border-radius: 5px;
		padding-top: 0;
	}

	.item.three:nth-of-type(2n+0), .item.five:nth-of-type(2n+0), .item.six:nth-of-type(2n+0) {
		margin-right: 3.5%;
	}	
	.item.three:nth-of-type(3n+0), .item.five:nth-of-type(3n+0), .item.six:nth-of-type(3n+0) {
		margin-right: 0;
	}
	/* 3 items: center 3rd item no more */
	.item.three:nth-of-type(3n+0) {
		margin-left: 0;
	}	
	/* 5 items: center 4th and 5th item */
	.item.five:nth-of-type(4n+0) {
		margin-left: 17.25%;
	}	
	.item.five:nth-of-type(5n+0) {
		margin-left: 0;
	}
	
	
	/* Neu 2025 */
	.anniversary {
		float: right;
		width: 20%;
		min-width: 150px;
		margin: 0 1em 1.5em 1.5em;
	}
	.anniversary img {
		width: 100%;
	}
	/************************/	
}

@media only screen and (min-width: 55em) {
	/* Bilder */
	.pics {
		padding: 0;
		margin: 1em 0 0 0;
		display: table;
	}
	.pics.bottom_distance {
		margin-bottom: 2em;
	}
	.pics figure {
		display: table;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.pics figure img {
		display: table-cell;
		vertical-align: middle;
		padding: 0;
		height: auto;
	}
	.pics figure figcaption {
		display: table-cell;
		width: 40%;
		background-color: #457bd1;
		color: #FFF;
		vertical-align: middle;
		padding: 0 2vw;
	}
	.pics figure figcaption.grau {
		background-color: #8b8786;
	}	
	
	/* Download Link anpassen */
	p.download a {
		display: block;
		color: #FFF;
		background: url(../img/download-white.png) left center no-repeat;
		background-size: 2em;
	}
}

@media only screen and (min-width: 64em) {
	h1 {
		font-size: 2.5em;
	}	
	h2 {
		font-size: 1.5em;
	}
	h3 {
		font-size: 1.25em;
	}
	#header-top {
		position: fixed;
	}	
	.header-visible {
		margin-top: 0 !important;
	}
	section {
		padding: 4em 0 6em 0;
	}
	
	.only_mobile {
		display: none;
	}
	span.not_mobile {
		display: inline-block;
	}
	div.not_mobile {
		display: block;
	}
	#header-top {
		transition: all 0.5s ease-in-out;		
	}
	.navi-wrapper {
		width: 100%;
		max-width: 1920px;
		margin: 0 auto;
		padding: 0;
	}
	#navbgd {
		height: auto;
		margin: 0;
	}	
	.wrapper {
		width: 90%;
		max-width: 1300px;
	}
	#logo, #navi {
		transition: all 0.5s ease-in-out;
	}
	#logo {
		padding: 1.9em 1em 1.9em 0.5em;
	}
	#logo img {
		width: 200px;
		transition: all 0.5s ease-in-out;		
	}
	
	#navi {
		float: right;
		padding: 2.5em 0;
	}	
	
	/* Navigation anpassen bei P7 */
	.p7PM3-09 ul li a, .p7PM3-09 ul li span {
		padding: 0.6em 0.6em;
		font-size: 0.9rem;
		
		padding: 0.6em 0.4em;
	}	
	
	/* Navigation überschreiben mit Ausrichtung rechts */
	.p7PM3-09.menu-centered {
		text-align: right !important;
	}	
	
	.hamburger {
		display: none;
	}
	
	/* Links im Footer */
	.copyright {
		float: left;
	}
	.submenu {
		display: block;
		float: right;
		text-align: right;
	}
	#foot a {
		text-decoration: none;
		color: #f0f0f0;
	}
	#foot a:link {
		text-decoration: none;
	}
	#foot a:visited {
		text-decoration: none;
	}
	#foot a:hover, #foot a:focus {
		text-decoration: underline;
	}
	#foot a:active {
		text-decoration: none;
	}

	div.left {
		float: left;
		width: 50%;
		padding: 0em;
		margin-top: 5em;
	}
	div.right {
		float: right;
		width: 50%;
		padding: 0em;
		margin-top: 5em;
	}
	.right img, .left img {
		height: 27.5em;
		width: auto;
		max-width: none;
	}

	#foot {
		margin: 0;
		padding: 0;
	}
	#foot .copyright {
		font-size: 1em;
	}
	.copyright-content {
		margin: 0 auto;
		padding: 4em 0;
		width: 90%;
		max-width: 1300px;
	}
	.copyright p, .submenu p {
		line-height: 0;
	}
	#foot {
		font-size: 0.875em;
	}

	/* Schriftgröße und Position Slideshow anpassen */
	.slideshow li span {
		background-position: 50% 50%;
	}
	.slideshow li div {
		bottom: 5vh;
	}	
	.slideshow li:nth-child(1) span {
		background-image: url(../img/slider-anlagentechnik.jpg);
	}	
	.slideshow li:nth-child(2) span {
		background-image: url(../img/slider-homogenisatoren-min.jpg);
	}	
	.slideshow li:nth-child(3) span {
		background-image: url(../img/slider-antriebstechnik-min.jpg);
	}
	.slideshow li:nth-child(4) span {
		background-image: url(../img/slider-dichtungstechnik-min.jpg);
	}
/*	.slideshow li:nth-child(4) span {
		background-image: url(../img/slider-anlagentechnik.jpg);
	}
	.slideshow li:nth-child(5) span {
		background-image: url(../img/slider-antriebstechnik-min.jpg);
	}
	.slideshow li:nth-child(6) span {
		background-image: url(../img/slider-dichtungstechnik-min.jpg);
	}*/	
	#antriebstechnik .header-photo, #elektromotoren .header-photo, #frequenzumrichter .header-photo, #sonderposten .header-photo {
		height: 30vh;
		min-height: 20em;
		background: url(../img/slider-antriebstechnik-min.jpg) top -2vw center no-repeat;
		background-size: cover;
	}	
	#anlagentechnik .header-photo, #messtechnik .header-photo, #prozesspumpen .header-photo, #prozessventile .header-photo, #waermetauscher .header-photo {
		height: 30vh;
		min-height: 20em;
		background: url(../img/slider-anlagentechnik.jpg) top -2vw center no-repeat;
		background-size: cover;	
	}
	#dichtungstechnik .header-photo, #oem-dichtungen .header-photo, #dm-dichtungen .header-photo {
		height: 30vh;
		min-height: 20em;
		background: url(../img/slider-dichtungstechnik-min.jpg) top -2vw center no-repeat;
		background-size: cover;	
	}	
	#homogenisatoren .header-photo {
		height: 30vh;
		min-height: 20em;
		background: url(../img/slider-homogenisatoren-min.jpg) top center no-repeat;
		background-size: cover;
	}	
	#homogenisatoren-produktion .header-photo {
		height: 30vh;
		min-height: 20em;
		background: url(../img/slider-homogenisatoren-produktion-min.jpg) top center no-repeat;
		background-size: cover;
	}	
	#labor-homogenisatoren .header-photo {
		height: 30vh;
		min-height: 20em;
		background: url(../img/slider-homogenisatoren-labor-min.jpg) top center no-repeat;
		background-size: cover;
	}	
	#hochdruck-homogenisatoren .header-photo {
		height: 30vh;
		min-height: 20em;
		background: url(../img/slider-homogenisatoren-hochdruck-min.jpg) center center no-repeat;
		background-size: cover;
	}		
	#pilotanlagen .header-photo {
		height: 40vh;
		min-height: 10em;
		background: url(../img/slider-pilotanlagen-homogenisatoren-min.jpg) center center no-repeat;
		background-size: cover;		
	}
	#services-homogenisatoren .header-photo {
		height: 40vh;
		min-height: 10em;
		background: url(../img/slider-homogenisatoren-labor-min.jpg) bottom center no-repeat;
		background-size: cover;		
	}
	#sterilwasser .header-photo {
		height: 40vh;
		min-height: 10em;
		background: url(../img/slider-sterilwasser-einheit-min.jpg) center center no-repeat;
		background-size: cover;		
	}
	#schaltschrankbau .header-photo {
		height: 40vh;
		min-height: 10em;
		background: url(../img/slider-schaltschrankbau-min.jpg) center center no-repeat;
		background-size: cover;		
	}
	#pumpen .header-photo {
		height: 40vh;
		min-height: 10em;
		background: url(../img/slider-pumpen-min.jpg) center center no-repeat;
		background-size: cover;		
	}
	#hochdruckpumpen .header-photo {
		height: 40vh;
		min-height: 10em;
		background: url(../img/slider-hochdruckpumpen-min.jpg) center center no-repeat;
		background-size: cover;		
	}
	#feststoffpumpen .header-photo {
		height: 40vh;
		min-height: 10em;
		background: url(../img/slider-feststoffpumpe-min.jpg) center center no-repeat;
		background-size: cover;		
	}
	#scherpumpen .header-photo {
		height: 40vh;
		min-height: 10em;
		background: url(../img/slider-scherpumpen-min.jpg) center center no-repeat;
		background-size: cover;		
	}
	#kolloidmuehlen .header-photo {
		height: 40vh;
		min-height: 10em;
		background: url(../img/slider-kolloidmuehlen-min.jpg) center center no-repeat;
		background-size: cover;		
	}
	#zentrifugalpumpen .header-photo {
		height: 40vh;
		min-height: 10em;
		background: url(../img/slider-zentrifugalpumpen-min.jpg) center center no-repeat;
		background-size: cover;		
	}
	#selbstansaugende-pumpen .header-photo {
		height: 40vh;
		min-height: 10em;
		background: url(../img/slider-pumpen-min.jpg) top center no-repeat;
		background-size: cover;		
	}	
	#mischsysteme .header-photo {
		height: 40vh;
		min-height: 10em;
		background: url(../img/slider-mischsysteme-min.jpg) center center no-repeat;
		background-size: cover;		
	}	
	
	.dso-logo {
		float: right;
		width: 25%;
		margin: 0.5em 0.5em 0.25em 1em;
		text-align: right;
	}
	.dso-logo img {
		width: 100%;
		max-width: none;
		height: auto;
	}	
}

@media only screen and (min-width: 70em) {
	.navi-wrapper {
		width: 94%;
	}
	#logo {
		padding: 1.6em 1em 1.6em 0.5em;
	}	
	#logo img {
		width: 250px;
	}
}

@media only screen and (min-width: 90em) {
	/* Navigation anpassen bei P7 */
	.p7PM3-09 ul li a, .p7PM3-09 ul li span {
		padding: 0.6em 0.8em;
		font-size: 0.95rem;
	}
	#foot {
		font-size: 1.0em;
	}		
	
	/* Anpassung Kontaktdaten */
	.overlay p {
		font-size: 2em;
	}
	.overlay-content h3 {
		font-size: 3.25em;
		margin-bottom: 1em;
	}	
	.overlay .closebtn {
		font-size: 6em;
	}
	#header-top {
		height: 7em;
		/*background-color: #FFF;*/
	}
	#navi {
		padding: 3.2em 0 1.75em 0;
	}	
	#logo {
		padding: 1em 0;
	}
	#logo img {
		width: 400px;
	}	
	/************ Logo Shrinking at Scroll Down ***********/
	#logo.logo-shrink {
		padding: 0.75em 0;
	}
	#logo.logo-shrink img {
		width: 300px;
	}
	#navi.navi-shrink {
		padding: 2em 0 1.3em 0;
	}
	#header-top.header-shrink {
		height: 5.5em;
	}	
	/*****************************************/		
	
	.wrapper._items {
		width: 96%;
		max-width: 1750px;
	}	
	.item.five {
		float: left;
		width: 22.75%;
		width: 23.5%;
		margin: 2em 2% 0 0;
		border-radius: 5px;
		padding-top: 0;
	}	
	.item.five:nth-of-type(2n+0) {
		margin-right: 2%;
	}	
	.item.five:nth-of-type(3n+0) {
		margin-right: 2%;
	}	
	.item.five:nth-of-type(4n+0) {
		margin-right: 0;
		margin-left: 0;
	}	
	
	/* 5 items: center last item  */
	.item.five:nth-of-type(5n+0) {
		margin-left: 38.5%;
	}	
	
	.item.six {
		width: 22.75%;
		margin: 2em 3% 0 0;
	}
	.item.six:nth-of-type(2n+0) {
		margin-right: 3%;
	}	
	.item.six:nth-of-type(3n+0) {
		margin-right: 3%;
	}	
	.item.six:nth-of-type(4n+0) {
		margin-right: 0;
	}	
	
	/* 6 items: center 5th and 6th item */
	.item.six:nth-of-type(5n+0) {
		margin-left: 25.75%;
	}	
	.item.six:nth-of-type(6n+0) {
		margin-left: 0;
	}	
	
	.item-text p {
		font-size: 0.9375em;
	}	
}

@media only screen and (min-width: 105em) {
	.wrapper {
		width: 80%;
		margin-right: auto;
	}	
	/* Navigation anpassen bei P7 */
	.p7PM3-09 ul li a, .p7PM3-09 ul li span {
		padding: 0.6em 0.9em;
		font-size: 1rem;
	}
	#header-top, #head {
		height: 10em;
	}
	#logo {
		padding: 1em 0;
	}
	#logo img {
		width: 600px;
	}
	#navi {
		padding: 5.5em 0 2.3em 0;
	}
	
	/* Korrektur der items */
	.item.five {
		float: left;
		width: 19%;
		margin: 2em 1.25% 2em 0;
		border-radius: 5px;
		padding-top: 0;
	}
	.item.five:nth-of-type(2n+0) {
		margin-right: 1.25%;
	}	
	.item.five:nth-of-type(3n+0) {
		margin-right: 1.25%;
	}	
	.item.five:nth-of-type(4n+0) {
		margin-left: 0;
	}
	.item.five:nth-of-type(5n+0) {
		margin-right: 0;
		margin-left: 0;
	}
	
	.item.three {
		width: 25%;
		margin: 2em 5% 2em 0;
	}
	.item.three:first-of-type {
		margin-left: 7.5%;
	}	
	.item.three:nth-of-type(2n+0) {
		margin-right: 5%;
	}	
	.item.three:nth-of-type(3n+0) {
		margin-right: 7.5%;
	}		
	
/*	.item.six {
		width: 22.75%;
		margin: 2em 3% 0 0;
	}
	.item.six:nth-of-type(2n+0) {
		margin-right: 3%;
	}	
	.item.six:nth-of-type(3n+0) {
		margin-right: 3%;
	}	
	.item.six:nth-of-type(4n+0) {
		margin-right: 0;
	}	
	
	/* 6 items: center 5th and 6th item */
	.item.six:nth-of-type(5n+0) {
		margin-left: 25.75%;
	}	
	.item.six:nth-of-type(6n+0) {
		margin-left: 0;
	}*/	
}

/* Tablets/Smartphones with landscape orientation */
@media only screen and (min-width: 0px) and (max-width: 59.99999em) and (max-height: 34em) {
	#header-top {
		position: absolute;
	}
}
/* Mobile Last-Regel to Reset Equal Height Columns for Smartphones */
@media only screen and (min-width: 0px) and (max-width: 39.99em) {
	.p7ehc-a, .p7ehc-b, .p7ehc-c, .p7ehc-d, .p7ehc-e, .p7ehc-f {
		height: auto !important;
		max-height: 888678px;	
	}	
}
@media only print {
	html {
		font-size: 100%;
	}
	body {
		color: #000;
	}	
	h1, h2, h3 {
		text-shadow: none;
	}
	#header-top {
		background-color: transparent;
		box-shadow: none;
	}
	#logo {
		top: 0px;
		right: 0px;
		width: auto;
	}
	#logo img {
		width: 200px;
	}	
	#navi, #footer-nav, #totop, .breadcrumbs {
		display: none !important;
	}	
	.wow {
        animation-name: none !important;
        visibility: visible !important;		
	}	
	a.text-link {
		text-decoration: underline !important;
		border-bottom: none !important;
		color: #000 !important;
		padding: 0;
	}
	.item {
		float: left;
		width: 31%;
		margin: 0 3.5% 1em 0;
		border-radius: 5px;
		page-break-inside: avoid;
	}
	.item:nth-of-type(3n) {
		margin-right: 0;
	}
	.item figure {
		width: 100%;
		text-align: center;
		overflow: hidden;
		padding: 1em;
		background-color: #f3f3f3;
		display: table-cell;
		vertical-align: middle;
	}
	.item figure img {
		width: 100%;
		height: auto;
	}
	.item-text {
		text-align: center;
		padding: 1em;
		font-size: 75%;
	}
	#foot {
		padding: 1em 0;
		paddibng: 0;
		margin: 2em 0 0 0;
		background-color: transparent;
		color: #000 !important;
		border-top: none;
	}
	.copyright-wrapper, .copyright {
		background-color: transparent;
	}	
	.copyright-content {
		margin: 0 auto;
		padding: 2em 0;
		width: 100%;
	}	
	.p7ehc-a, .p7ehc-b, .p7ehc-c, .p7ehc-d, .p7ehc-e, .p7ehc-f {
		height: auto !important;
		max-height: 888678px;	
	}		
}