/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v25-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v25-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v25-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v25-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v25-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v25-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v25-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* oswald-300 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/oswald-v49-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/oswald-v49-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oswald-v49-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oswald-v49-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oswald-v49-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oswald-v49-latin-300.svg#Oswald') format('svg'); /* Legacy iOS */
}

* {
	box-sizing: inherit;
}

body {
	box-sizing: border-box;
	font-family: 'Roboto Condensed', sans-serif;
	line-height: 1.6;
	font-size: 16px;
	font-weight: 300;
	color: #241115;
	margin: 0px;
}

blockquote, figure {
    display: block;
    margin: 0px;
}

a,
a:hover {
	text-decoration: none;
	color: #801e35;
	outline: none;
	
	transition:All 0.2s ease-in-out;
	-webkit-transition:All 0.2s ease-in-out;
	-moz-transition:All 0.2s ease-in-out;
	-o-transition:All 0.2s ease-in-out;
}

a:hover {
	color: #cf3054;
}

::selection {
	background: #801e35;
	color: #ffffff;
}

::-moz-selection {
	background: #801e35;
	color: #ffffff;
}

img,
object {
	border: none;
	display: inline-block;
	max-width: 100%;
}

h1, h2, h3, h4, h5,
nav {
	line-height: 1.5;
	font-weight: 300;
	color: #988866;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
}


h1 {
	font-weight: 300;
	font-size: 2.1em;
	line-height: 1.2;
	color: #988866;
	position: relative;
	hyphens: auto;
}

.subheadline,
h2.subheadline {
	font-weight: 300;
	text-transform: none;
	color: #241115;
	opacity: 0.6;
	margin-top: 0px;
}
h2{
	hyphens: auto;
	font-size: 1.7em;
}

h3 {
	font-size: 1.5em;
	line-height: 1.1;
	margin-top: 40px;
	line-height: 1.3;
	margin-bottom: 20px;
}

h4 {
	font-size: 1.3em;
	line-height: 1.3;
	margin-top: 40px;
	margin-bottom: 20px;
}

h5 {
	font-size: 1.1em;
	margin-top: 40px;
	margin-bottom: 20px;
}

b, strong {
    font-weight: 700;
}

.italic {
	font-family: 'Oswald', sans-serif;
	margin-top: 0px;
	font-weight: 300;
	margin-top: 20px;
	margin-bottom: 20px;
}

ul.italic {
	padding-left: 15px;
}

ul.italic li {
	margin: 6px 0px;
}

hr {
	border-top: 1px solid;
	border-bottom: none;
	border-left: none;
	border-right: none;
	margin: 40px 0px;
}

a.weiss {
	color: #fff;
}

.bg-red.front a {
    opacity: 0.5;
}

.bg-red.front a:hover {
    opacity: 0.75;
}

.bg-red.front .weiter {
	opacity: 1;
}

.bg-weiss {
	background: #ffffff;
}

.bg-red {
	background: #801e35;
	color: #fff;	
}

.bg-red h2 {
	color: #fff;	
}

.bg-red .text a {
	color: rgba(255,255,255,0.6);	
}

.bg-gray {
	background-color: #f5f5f5;	
}

.bg-darkgray {
	background-color: rgba(152,136,102,0.3);	
}

.bg-dark {
	background-color: #241115;
	color: #fff;
}
.bg-red a,
.bg-dark a {
	color: #fff;
}

.grayscale img  {	
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	transition:All 1s ease;
	-webkit-transition:All 1s ease;
	-moz-transition:All 1s ease;
	-o-transition:All 1s ease;
}

.grayscale img:hover {
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	filter: grayscale(0%);
}

.border {
	border:10px solid #801e35;
}

.linie {
    width: 2px;
    height: 60px;
    background: #801e35;
    text-align: center;
    margin: 1rem auto 2rem auto;
}

.weiter,
.zurueck{
	margin: 0;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #241115;
}

.weiter:hover {
	color: #801e35;
}

.weiter:after {
	content:"";
	display: inline-block;
	margin-left: 10px;
	vertical-align: sub;
	background: url(../../bilder/icons/weiter.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	width: 20px;
	height: 18px;
}

.weiter.weiss:after {
	background: url(../../bilder/icons/weiter-weiss.svg);
	background-repeat: no-repeat;
	background-position: center;
}

.zurueck:before {
	content:"";
	display: inline-block;
	margin-right: 10px;
	vertical-align: sub;
	background: url(../../bilder/icons/weiter.svg);
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(180deg);
	background-size: 100%;
	width: 20px;
	height: 18px;
}

.link {
	border: 2px solid #801e35;
	padding: 10px 15px;
	display: inline-block;
	margin-top: 20px;
	
	transition:All 0.2s ease-in-out;
	-webkit-transition:All 0.2s ease-in-out;
	-moz-transition:All 0.2s ease-in-out;
	-o-transition:All 0.2s ease-in-out;
}

.link:hover {
    background: #801e35;
	color: #fff;
	opacity: 1;
}


.link.weiss {
    border: 2px solid #fff;
	color: #fff;
}

.link.weiss:hover {
    background: #fff;
	color: #801e35;
	opacity: 1;
}

.weiter.weiss,
.zurueck.weiss {
	color: #fff;
}

.download {
	color: #241115;
	margin-right: 30px;
}

.download svg {
	color: #801e35;
}

.bg-darkgray .download {
    color: #fff;	
    margin-top: 20px;
    margin-right: 30px;
}

.bg-darkgray .download svg {
	color: #241115;
}

.container {
	width: 100%;
    max-width: 1200px;
}

#Inhalt .container > h1:empty {
    display: none;
}

.col-md-6  h2:first-child {
    margin-top: 0;
}

.col-md-6  h3:first-child {
    margin-top: 0;
} 

.ms-tableCell {
	padding: 5rem;
}

/**/
.container {
    padding-right: 30px;
    padding-left: 30px;
}

.row {
    margin-right: -30px;
    margin-left: -30px;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: 30px;
    padding-left: 30px;
}

.padding {
	padding: 20px;
}

.padding-2x {
	padding: 40px 20px;
}
.padding-2x-2x {
	padding: 40px;
}

.padding-top-bottom {
	padding-top: 20px;
	padding-bottom: 20px;
}

.padding-top {
	padding-top: 20px;
}

.padding-top-2x {
	padding-top: 40px;
}

.padding-bottom {
	padding-bottom: 20px;
}

.padding-bottom-2x {
	padding-bottom: 40px;
}

.padding-left {
	padding-left: 0px;
}

.padding-left-2x {
	padding-left: 0px;
}

.padding-right {
	padding-right: 0px;
}

.padding-right-2x {
	padding-right: 0px;
}

.margin {
	margin: 20px;
}

.margin-2x {
	margin: 40px 20px;
}

.margin-top-bottom {
	margin-top: 20px;
	margin-bottom: 20px;
}

.margin-top {
	margin-top: 20px;
}

.margin-top-2x {
	margin-top: 40px;
}

.margin-top-negativ {
	margin-top: 0px;
}

.margin-bottom {
	margin-bottom: 20px;
}

.margin-bottom-2x {
	margin-bottom: 40px;
}
/*Padding Ende*/
.front {
	z-index: 1;
}
.center {
	text-align: center;
	margin-left: auto;
	margin-left: auto
}

#header #logo {
	max-width: 100%;
	width: 280px;
	padding: 0px;
	position: relative;
}

.startseite #header #logo .weiss,
#header #logo .farbe {
    padding-left: 30px;	
}

.startseite #header.active #logo .weiss {
    padding-left: 0px;	
}


#logo object  {
    width: 100%;
}

#logo a:after {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

#logo a {
    display: block;
}

/*Header on Scroll*/
.startseite #header #logo .weiss {
	display: block;
}

.startseite #header #logo .farbe {
	display: none;
}

.startseite #header.active #logo .weiss {
	display: none;
}

.startseite #header.active #logo .farbe {
	display: block;
}

#header #logo .weiss {
	display: none;
}

#header.active, 
.startseite #header.active {
	padding: 0px;
}

#header.active #logo,
.startseite #header.active #logo {
	padding: 20px 20px 20px 0px;
}

.startseite #header.active,
.standard #header,
#header.active {
    background: #ffffff;
}
/*Mobil Menü*/
.DesktopHidden,
.col-md-hidden,
.hidden {
	display: none!important;
}

#content_wrapper {
    margin-top: 140px;
}
.startseite #content_wrapper.active {
    margin-top: 140px;
}

.startseite #content_wrapper {
    margin-top: 0px;
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 0px;
    z-index: 10000;
    transition: all 0.2s ease-in-out;
    height: auto;
    text-align: center;
    line-height: 40px;
}

#header .container {
    padding: 0px;
}

#header ul  {
	text-align: left;
}

#nav_wrapper.open #main_nav {	
	display: block;
}

#nav_wrapper.open {
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	z-index: 2;
}

#main_nav {
	display: none;
	position: relative;	
	overflow: scroll;
	margin-top: 60px;
	margin-bottom: 60px;
	font-size: 1.125rem;
	width: 100%;
	height: 100vh;
	padding: 30px 0px;
	box-sizing: border-box;
	
	transition:				All 0.2s ease-in-out;
	-webkit-transition:		All 0.2s ease-in-out;
	-moz-transition:		All 0.2s ease-in-out;
	-o-transition:			All 0.2s ease-in-out;
}

#main_nav ul {
	margin: 0px;
	padding: 0px;
}

#main_nav ul li {
	display: block;
	width: 100%;
	cursor: pointer;
	border-bottom: 1px solid #801e35;
}

#main_nav > ul > li > a {
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.02em;
}

#main_nav ul li a {
	position: relative;
	display: block;
	color: #801e35;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1em;
	padding: 20px 30px;
}

#main_nav > ul > li > a:before {
	content: normal;
}


#main_nav ul li a:hover,
#main _nav ul .aktiv > a {
    background: #801e35;
	color: #fff;
}

#main_nav ul .aktiv > a:before {
	content:normal;
}

#main_nav .sub-menu {
	background: #fff;
	position: absolute;
	top: 0px;
	display: block;
	height: 100%;
	left: 0px;
	visibility: visible;
	left: 100%;
	margin: 0px;
	width: 100%;
	max-width: none;
	z-index: 3;
}
#main_nav .sub-menu .back {
	display: block;
}

#main_nav .sub-menu .back:after {
	content:"";
	height: 12px;
	width: 12px;
	border-left: 2px solid #801e35;
	border-bottom: 2px solid #801e35;
 
	position: absolute;
	right: 30px;
	top: 30px;
	   
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg) ;
	-moz-transform: rotate(45deg) ;
	-o-transform: rotate(45deg) ;
	-ms-transform: rotate(45deg) ;
}

#main_nav .sub-menu .back:hover:after {
	background: transparent;
	border-color: #ffffff;
}

.has-sub > a:after {
	content: "";
	height: 12px;
	width: 12px;
	border-right: 2px solid #801e35;
	border-top: 2px solid #801e35;
	transform: rotate(45deg);

	position: absolute;
	right: 30px;
	top: 30px;
}

.has-sub > a:hover:after {
	border-color: #ffffff;
}

/*Mobil Menü*/
#mobile-menu {
    cursor: pointer;
    display: block;
    height: 22px;
    position: relative;
    right: 30px;
    top: 0px;
    width: 25px;
    z-index: 50;
}

#mobile-menu span {
    background-color: #801e35;
    display: block;
    height: 3px;
    left: 0;
    opacity: 1;
    position: absolute;
    width: 100%;
	border-radius: 3px;
	
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	
	-webkit-transition: 0.25s ease-in-out;
	-moz-transition:0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

.startseite #nav_wrapper #mobile-menu span {
	background-color: #ffffff;
}

.startseite #nav_wrapper #header.active #mobile-menu span {
 	background-color: #801e35;
}

#mobile-menu span:nth-child(1) {
    top: 0;
}

#mobile-menu span:nth-child(2) 
 {
    top: 8px;
}

#mobile-menu span:nth-child(3) {
    top: 17px;
}

#mobile-menu.open span:nth-child(1) {
    left: 50%;
    top: 10px;
    width: 0;
}

#mobile-menu.open span:nth-child(2) {
	top: 10px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

#mobile-menu.open span:nth-child(3) {
	top: 10px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/*Mobil Menü ENDE*/
/*Menü Ende*/

#kopfgrafik {
	position: relative;
	text-align: center;
	background: #241115;
	z-index: 2;
}

.startseite #multiscroll-nav span {
    border: 1px solid #801e35;
}
.startseite #multiscroll-nav li .active span {
    background: #801e35;
}

#kopfgrafik img {
    max-width: 100%;
	margin: 0 auto;
}
#kopfgrafik .ring {
	position: absolute;
	width: 250px;
	left: 50%;
	bottom: 40px;
	margin-left: -150px;
}

.slider.startseite {
    height: 100vh;
}

.slider.startseite .slick-slide {
	background-size: cover !important;
	background-position: center !important;
    height: 100vh;
}

#kopfgrafik .slide-text {
	position: absolute;
	top: 40vh;
	z-index: 8;
	text-align: center;
	width: 100%;
}

#kopfgrafik .slide .slide__title {
	font-family: 'Oswald', sans-serif;
	position: relative;
	top: auto;
	pointer-events: none;
	text-align: center;
	max-width: 1200px;
	padding: 0 1em;
	margin: 0px auto;
	font-weight: 300;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 300;
	color: #fff;
	z-index: 10;
	font-size: 1em;	
}

.fullscreen-image {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/*Seite*/


/*ENDE*/

/**/

.kernkonzept span {
	font-size: 500px;
	font-weight: 700;
	line-height: 1;
	opacity: 1;

	color: transparent;
	background: -webkit-linear-gradient(transparent, transparent),
	url(../../bilder/startseite/referenzen/referenz-1.jpg) repeat;
	-webkit-background-clip: text;
	background-size: cover;
}

.kernkonzept .backgroundclip {
	background: #801e35;
}
.internetagentur .text,
#Leistungen .text {
	height: 100%;
}

#Leistungen h3,
.internetagentur h3 {
    margin-top: 1rem;
}

/*Referenzen Preview Startseite*/
#Referenzeinstieg h5 {
	margin-top: 0px;
	margin-bottom: 0px;
	color: #ffffff;
	opacity: 0.75;
	text-transform: none;
	font-size: 1.5rem;
}

#Referenzeinstieg h2 {
	margin-top: 0px;
	margin-bottom: 0px;
	color: #fff;
}
#Referenzeinstieg span {
	color: #fff;
	opacity: 0.75;
}

#Referenzeinstieg p {
	margin-top: 20px;
}
#Referenzeinstieg .referenz_preview {
	position: relative;	
}

#Referenzeinstieg .referenz_preview a {
   display: block;	
	overflow: hidden;
	width: 100%;
	height: 100%;
}

#Referenzeinstieg .referenz_preview a:before {
	content: "";
	background: url(../../bilder/navigat/plus.svg);
	background-position: center;
	background-size: 60px;
	background-repeat: no-repeat;
	position: absolute;
	display: block;
	color: #fff;
	font-weight: 300;
	width: 100%;
	height: 100%;
	font-size: 50px;
	z-index: 1;
	opacity: 0;
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}
#Referenzeinstieg .referenz_preview a:after {
	background-color: #801e35;
	mix-blend-mode: multiply;
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	opacity: 0;
	top: 0;
	width: 100%;
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}

#Referenzeinstieg .referenz_preview figcaption {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	padding: 40px;
	opacity: 0;
	z-index: 1;
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}

#Referenzeinstieg .referenz_preview a:hover figcaption,
#Referenzeinstieg .referenz_preview a:hover:before {
	opacity: 1;
}
#Referenzeinstieg .referenz_preview a:hover,
#Referenzeinstieg .referenz_preview a:hover:after {
	opacity: 1!important;
}

#Referenzeinstieg .referenz_preview img {
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	filter: grayscale(0%);
	transition:All 1s ease;
	-webkit-transition:All 1s ease;
	-moz-transition:All 1s ease;
	-o-transition:All 1s ease;
}

#Referenzeinstieg .referenz_preview a:hover img {	
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
}

#Referenzeinstieg .referenz_preview h3 {
	margin: 0;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
}

#Referenzeinstieg .referenz_preview p {
	margin: 0;
	font-family: 'Oswald', sans-serif;
	color: #fff;
}
/*Referenzen*/
.referenzuebersicht a {
	color: #241115;
}
.referenzuebersicht a:hover {
	opacity: 1;	
}

.referenzuebersicht figure {
	margin: 20px 0px 0px 0px;
}

.referenzuebersicht figcaption {
    display: block;
    margin-top: 10px;
}
.referenzuebersicht .fade .image {
    cursor: pointer !important;
    display: block;
	width: 100%;
    position: relative;
}

.referenzuebersicht .fade {
	opacity: 1;
}
.referenzuebersicht .fade .image img {
    cursor: pointer !important;
    height: auto;
    opacity: 1;
    position: relative;
    width: 100%;
    z-index: 1;
	
	transition:All 50.s ease-in-out;
	-webkit-transition:All 0.5s ease-in-out;
	-moz-transition:All 0.5s ease-in-out;
	-o-transition:All 0.5s ease-in-out;
}

.referenzuebersicht .fade .image img.back {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 0;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}
.referenzuebersicht .fade:hover img.front {
    opacity: 0;
}
.referenzuebersicht .fade .image:after {
	background-color: #801e35;
	mix-blend-mode: multiply;
	z-index: 1;
	width: 100%;
	height: 100%;
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	opacity: 0;
	transition:All 0.5s ease-in-out;
	-webkit-transition:All 0.5s ease-in-out;
	-moz-transition:All 0.5s ease-in-out;
	-o-transition:All 0.5s ease-in-out;
}

.referenzuebersicht .fade .image:hover:after {
	opacity: 1;
}

.infobox {
	position: relative;
	z-index: 1;
}


.infobox .liste {
	font-size: 20px;
}

*/
/*Fallback MIX Blend Mode*/
.no-mix-blend-mode .filter:after,
.no-mix-blend-mode .referenzuebersicht .fade .image:hover:after,
.no-mix-blend-mode #Referenzeinstieg .referenz_preview a:hover:after {
	opacity: .75;
}

.no-mix-blend-mode .filter::after,
.no-mix-blend-mode .referenzuebersicht .fade .image:after,
.no-mix-blend-mode #Referenzeinstieg .referenz_preview a:after {
	opacity: .0;
}
/*Leistungen*/
#leistungen .fade {
	opacity: 1;
}

/*Referenz Ende*/
.projekt {
	height: calc(100% - 2rem);
}

.projekt .bild{
	min-height: 180px;
}

/*Content*/
#Inhalt {
	position: relative;
}
/*Fade Effekt*/
#kopfgrafik {
	-webkit-animation: fadedown 0.8s ease-in-out;
	-moz-animation: fadedown 0.8s ease-in-out;
	-o-animation: fadedown 0.8s ease-in-out;
}

@-webkit-keyframes fadedown {
	from { -webkit-transform: translateY(-40px);opacity: 0;}
	to { -webkit-transform: translateY(0px); opacity: 1;}
}
@-moz-keyframes fadedown {
	from { -moz-transform: translateY(-40px);opacity: 0;}
	to { -moz-transform: translateY(0px); opacity: 1;}
}
@-o-keyframes fadedown {
	from { -o-transform: translateY(-40px);opacity: 0;}
	to { -o-transform: translateY(0px); opacity: 1;}
}


#Inhalt {
-webkit-animation: cssAnimation 0.8s 1 ease-in-out;
-moz-animation: cssAnimation 0.8s 1 ease-in-out;
-o-animation: cssAnimation 0.8s 1 ease-in-out;
}

@-webkit-keyframes cssAnimation {
	from { -webkit-transform: translateY(-70px); opacity: 0;}
	to { -webkit-transform: translateY(0px); opacity: 1;}
}
@-moz-keyframes cssAnimation {
	from { -moz-transform: translateY(-70px); opacity: 0;}
	to { -moz-transform: translateY(0px);opacity: 1; }
}
@-o-keyframes cssAnimation {
	from { -o-transform: translateY(-70px); opacity: 0;}
	to { -o-transform: translateY(0px); opacity: 1;}
}

/* ######################################################################  */


/* MArken Referenzen */
#marken .marken-grid{
	display: flex;
	gap: 40px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
#marken .marken-grid img{
	max-height: 50px;
}
#marken .marken-grid a{
	display: flex;
	align-items: center;
	justify-content: center;
}

/*Kacheln Links*/
.partner .col-md-6 {
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.partner .inner {
	background-color: #ffffff;
	padding: 60px;
	margin: 1rem;
	width:  100%;
	min-height: 500px;
	position: relative;
	text-align: center;
}

.soziales .inner {
	padding: 30px;
	text-align: left;
}

.partner a {
	display: block;
	color: #241115; 
	opacity: 1;
}


.soziales .overlay,
.partner .overlay {
	top: 0px;
	left: 0px;
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%;
	background: #fff;
	color: #fff;
	
	transition:All 0.2s ease-in-out;
	-webkit-transition:All 0.2s ease-in-out;
	-moz-transition:All 0.2s ease-in-out;
	-o-transition:All 0.2s ease-in-out;
	
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;	
}

.partner .overlay:hover {
	background: #241115;
    opacity: 1;
}

.soziales .overlay:hover {
    opacity: 1;
	background-color: #ffffff;
}

/**
 * Referenzen
 **/
#SubNaviInhalt ul,
.referenzuebersicht1 ul,
.referenzfilter > ul {
	list-style: none;
	margin: 0px;
}

.referenzfilter > ul {
	padding: 0px;
} 

#SubNaviInhalt li,
.referenzuebersicht1 li,
.referenzfilter > ul > li {
	margin: 5px;
}

#SubNaviInhalt li a,
.referenzuebersicht1 a,
.referenzfilter > ul > li > a {
	display: block;
	border: 2px solid #988866;
	color: #ffffff;
	padding: 10px 15px 5px 15px;
	text-align: center;
}

#SubNaviInhalt li a:hover,
.referenzuebersicht1 a:hover,
.referenzfilter > ul > li > a.active {
	border: 2px solid #801e35;
	background-color: #801e35;
	color: #ffffff;
}

.referenzuebersicht > .row > div {
	display: none;
	width: 100%;
}

.referenzuebersicht > .row > div.active {
	display: block;
	width: 100%;
	-webkit-animation: fade-in 2s ease-in-out;
    -moz-animation: fade-in 2s ease-in-out;
}


/*Dropdown*/
dl {
	margin-top: 60px;
}

dt {
	padding-bottom: 10px;
	background-image:url(../../img/navigat/open.svg);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 3% auto;
}


dt h3 {
    margin-bottom: 10px;
    margin-top: 10px;
}

dd {
    margin: 30px 0px 60px 0px;
	display:none;
}


.infoBlock ul {
	width: 60%;
}

.infoBlock ul li {
	margin-bottom: 5px;
}

#Tooltip h1{
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 1.125rem;
}

#Tooltip p {
	font-size: 0.875rem;
	font-weight: 400;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
}


/*SLICK SLIDER*/
.slick-next,
.slick-next:hover,
.slick-next:focus {
	background-image:url(../../bilder/icons/pfeil-rechts.svg)!important;
    right: 25px!important;
	width: 23px!important;
	height: 40px!important;
	z-index: 2000!important;
}

.slick-prev,
.slick-prev:hover,
.slick-prev:focus {
	background-image:url(../../bilder/icons/pfeil-links.svg)!important;
    left: 25px!important;
	width: 23px!important;
	height: 40px!important;
	z-index: 2000!important;
}

.slick-prev:before, 
.slick-next:before {
	display: none;
}

.slick-next:hover,
.slick-next:focus,
.slick-prev:hover,
.slick-prev:focus {
	opacity: 0.75;
}


.slick-dots li.slick-active button:before {
    background-color: #801e35;
    opacity: 1!important;
}

.slick-dots li button:before {
	content: ""!important;
	border: 1px solid #801e35;
	border-radius: 50%;
	opacity: 0.5!important;
	color: #801e35!important;
    width: 8px!important;
	height: 8px!important;
}

/*Formular*/
.kontakttabelle {
   	border: none;
    display: block;
    height: auto !important;
    margin: 0px;
	padding: 0px;
    min-height: 10px;
    width: 100%;
}

.button {
	display: inline-block;
	font-family: 'Oswald', sans-serif;
	font-size: 1.1em;
	font-weight: 300;
	position: relative;
	padding-top: 10px;
	padding-bottom: 3px;
	border-bottom: 2px solid #801e35;
	
	transition:All 0.2s ease-in-out;
	-webkit-transition:All 0.2s ease-in-out;
	-moz-transition:All 0.2s ease-in-out;
	-o-transition:All 0.2s ease-in-out;
}

.button:hover {
	color: #801e35;
	border-bottom: 2px solid #988866;
}

.bg-red .button,
.button.weiss {
	display: inline-block;
	font-family: 'Oswald', sans-serif;
	font-size: 1.1em;
	font-weight: 300;
	position: relative;
	padding-top: 10px;
	padding-bottom: 3px;
	border-bottom: 2px solid #ffffff;
	
	transition:All 0.2s ease-in-out;
	-webkit-transition:All 0.2s ease-in-out;
	-moz-transition:All 0.2s ease-in-out;
	-o-transition:All 0.2s ease-in-out;
}

.bg-red .button:hover,
.button.weiss:hover {
	color: #ffffff;
	border-bottom: 2px solid #988866;
}

.memo, .edit,
.plz,
.wohnort {
	font-family: inherit;
	font-size: inherit;
	background: rgba(152,136,102,0.3);
	border: none;
	border-radius: 3px;
	/*
    border-bottom: 1px solid #D9DADC;
	border-left: 0px;
	border-top: 0px;
	border-right: 0px;*/
    padding: 15px;
    width: 100%;
	margin-bottom: 10px;
	box-sizing: border-box;
}

.kontakttabelle input, 
.kontakttabelle textarea {
    font-family: inherit;
	font-size: inherit;
}

.kt_titel,
.kt_bezeichner,
.kt_bezeichner2,
.kt_bezeichner3 {
	display: block;
    margin: 0px;
	padding: 0px;
}

.kt_titel {
    text-align: right;
    width: 100%;
}

.kt_bezeichner {
   
    width: 100%;
}
.kt_bezeichner2 {
    width: 30%;
}

.kt_bezeichner3 {
    width: 70%;
}

.kt_wert1,
.kt_wert2,
.kt_wert3 {
	display: block;
	margin: 0;
	padding: 0px 0px 5px 0px;
}

.kt_wert1 {
    width: 100%;
}

.kt_wert2 {
    width: 25%;
}

.kt_wert3 {
    width: 74%;
}

.kt_buttons {
    display: block;
    margin: 0;
    padding: 10px 0px 0px 0px;
    text-align: right;
    width: 100%;
}

/* ######################################################################  */
.tabs {
	margin: 30px 0px;
}

.tabs a {
	color: #241115;
	margin-right: 10px;
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 3px solid #801e35;
}
/*NEUIGKEITEN*/
#MODUL_Neuigkeiten {
	
}

#umsNeuigkeit {
    background: #fff;
    padding: 60px;
    margin-top: 40px;
    margin-bottom: 40px;
    position: relative;
}

#umsNeuigkeit h1 {
    font-size: 1.5rem;
    margin: 0px;
}

#umsNeuigkeitDatum {
    color: #988866;
    margin-top: 5px;
    margin-bottom: 20px;
}

#MODUL_Neuigkeiten.Details #umsNeuigkeitDatum {
	text-align: right;
}

#umsNeuigkeitZurueck a,
#umsNeuigkeit #umsNeuigkeitDetaillink a {
	color: #801e35;
	display: inline-block;
	padding: 10px 20px;
	margin-top: 20px;
	border: 2px solid #801e35;	
	transition:				All 0.2s ease-in-out;
	-webkit-transition:		All 0.2s ease-in-out;
	-moz-transition:		All 0.2s ease-in-out;
	-o-transition:			All 0.2s ease-in-out;
}

#umsNeuigkeitZurueck a:hover,
#umsNeuigkeit #umsNeuigkeitDetaillink a:hover {
	background-color: #801e35;
	color: #fff;
}
/*Chart Animation*/
.kreislauf {
    overflow: hidden;
    position: relative;
}

.kreislauf h3 {
	-webkit-animation: chartlinks 1s ease-in forwards;
	-moz-animation: chartlinks 1s ease-in forwards;
	-o-animation: chartlinks 1s ease-in forwards;
	opacity: 0;
}

.kreislauf h3:nth-of-type(1) {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-o-animation-delay: 0s;
}

.kreislauf h3:nth-of-type(2) {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-o-animation-delay: 0.5s;
}
.kreislauf h3:nth-of-type(3) {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-o-animation-delay: 1s;
}
.kreislauf h3:nth-of-type(4) {
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
	-o-animation-delay: 1.5s;
}
.kreislauf h3:nth-of-type(5) {
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	-o-animation-delay: 2s;
}

@-webkit-keyframes chartlinks {
	from { opacity: 0;}
	to { opacity: 1;}
}
@-moz-keyframes chartlinks {
	from { opacity: 0;}
	to { opacity: 1;}
}
@-o-keyframes chartlinks {
	from { opacity: 0;}
	to { opacity: 1;}
}

.svg .st1 {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash 2s ease-in forwards;
	stroke: #97A0BF;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
	 stroke: #95A1AF;
  }
}

.koordinaten{
	position: relative;
	overflow: hidden;
}

.koordinaten:after {
	content: "48° 23' 55'' N, 9° 59' 41'' E [48.398508, 9.994812]";
	font-size: 300px;
	font-weight: 700;
	line-height: 0.8;
	opacity: 0.05;
	display: block;
	position: fixed;
	right: -80%;
	width: 100%;
	height: 10%;
	top: 0px;
	transform: rotate(90deg);
}
/*Stellenangebote*/
#MODUL_Jobs table {
    width: 100%;
	margin-top: 40px;
}
#MODUL_Jobs .STARTTEXT {
    text-align: center;
}

#MODUL_Jobs .td_UEBERSCHRIFT_NORMAL {
	display: none;
}

#MODUL_Jobs .td_UEBERSCHRIFTSZEILE_ZUSATZ {
	display: none;
}


#MODUL_Jobs .tr_NORMAL {
	background: #fff;
	border-bottom: 10px solid #f5f5f5;
	margin-bottom: 40px;
	transition:All 0.2s ease-in-out;
	-webkit-transition:All 0.2s ease-in-out;
	-moz-transition:All 0.2s ease-in-out;
	-o-transition:All 0.2s ease-in-out;
}

#MODUL_Jobs .tr_NORMAL:hover {
	background: #241115;
	color: #fff;
}

#MODUL_Jobs .td_NORMAL {
    padding: 30px 30px;
	margin-bottom: 2px;
}

#MODUL_Jobs .td_NORMAL {
    font-size: 24px;
}


#MODUL_Jobs .a-TABELLENLINK {
	color: #241115;
	padding-right: 30px;
	position: relative;
}

#MODUL_Jobs .tr_NORMAL:hover .a-TABELLENLINK {
	color: #fff;
}

#MODUL_Jobs .a-TABELLENLINK:after {
    content: "";
    height: 15px;
    width: 15px;
    margin-right: -15px;
    border-right: 2px solid #801e35;
    border-top: 2px solid #801e35;
    transform: rotate(45deg);
    padding: 0px;
    float: right;
    position: absolute;
    right: 20px;
    top: 3px;
}


/*Footer*/
.footer {
	background: #241115;
	padding: 40px 0px;
	z-index: 999;
	position: relative;
}

.footer.startseite {
    background: transparent;
    padding: 40px 0px;
    z-index: 999;
    position: absolute;
    bottom: 0;
	right: 0;
    width: 50%;
}

.footer_nav ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	font-style: italic;
}

.footer_nav ul:first-child li {
	display: block;
}

.footer_nav ul li {
	display: inline-block;
}

.footer_nav ul li a {
	color: #fff;
	padding: 0px 10px;
}

.footer_nav ul li a:hover {
	color: #988866;
}

.footer_nav .social-media-btn  {
	display: inline-block!important;
	margin: 30px 0px 0px 0px;
	/*border: 2px solid #fff;*/
	text-align: center;
	border-radius: 50%;
	font-size: 20px;
	width: 40px;
	height: 40px;
}

.footer_nav .social-media-btn a {
	color: #fff;
	padding: 0px;
	display: block;
}

.footer_nav .social-media-btn a i {
	line-height: 40px;
}

.portrait img {
	border-radius: 50%;
}


@-webkit-keyframes fade-in {
	0% { 
		opacity: 0;
	}
	100% { 
		opacity: 1;
	}
}

@-moz-keyframes fade-in {
	0% { 
		opacity: 0;
	}
    100% { 
		opacity: 1;
	}
}