/*
Das ist das allgemeine CSS - das über alle meine Themes laufen soll
*/

:root {
  --pink: #f6ac2c;
  --marker: #9df163;	
  --primary-marker: #ffac1d;
  --secondary-marker: #89d852;
  --third-marker: #707dff;
  --yellow-marker: #fceb41;
}

::-moz-selection {
  color: white; background: black;
}

::selection {
  color: white; background: black;
}

img::-moz-selection {
  color: white; background: transparent;
}

img::selection {
  color: white; background: transparent;
}

body, html {
	font-family: 'SimplonMono', Arial, sans-serif;
	font-size: 17px;
	color: #000000;
	letter-spacing: 0.4px;
}

.transition-2, a, .text-wrapper h2:after, .mute-wrapper:after, .mute-wrapper:before, .image-wrapper .position-center .btn:after, .active-wrapper .h3-font:after, .web-text-wrapper strong {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;	
}

.image-wrapper:before {
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;	
}

.outer-wrapper {
    max-width: 1800px;
    width:100%;
    padding-left:40px;
    padding-right: 40px;
    margin: auto;
}

.outer-wrapper .inner-outer-wrapper {
    padding-left:15px;
    padding-right: 15px;
}

.outer-wrapper.primary-bg, .outer-wrapper.dark-bg {
    max-width: 1720px;
}

.outer-white-wrapper .outer-wrapper {
	max-width: 1720px;
}

body.webdesign header a.webdesign, 
body.page-id-47 header a.page-id-47,
body.page-id-26 header a.page-id-26,
body.page-id-1775 header a.page-id-1775,
body.fotografie header a.fotografie, 
body.video header a.video, 
body.konzepte header a.konzepte, 
body.ueber-mich header a.ueber-mich, 
body.referenzen header a.referenzen {
    color:var(--pink);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--pink);
}

body.kontakt header a.kontakt {
	color:#000;
}

.button.color-marker {
	background-color:var(--marker);
	color:var(--marker);
	border-color:var(--marker);
	color:#000;
}

.button.color-marker.yellow-marker {
	background-color:var(--yellow-marker);
	border-color:var(--yellow-marker);
	color:#000;
}

.button.color-marker:hover {
	text-decoration: none;
}

header {
    /* padding-top:40px; */
    /* padding-bottom: 30px; */
    padding-bottom: 0px;
}

header a:hover {
    color:var(--pink);
    text-decoration: none;
}

p {
    margin-top:0px;
    margin-bottom: 20px;
}

p:last-child {
    margin-bottom: 0px;
}

a {
    color:#000;
    text-decoration: none;
}

a:focus {
    outline: none;
}

.hover-wrapper {
    position: relative;
}

h1, footer h2, header h2 {
	font-family: carlmarx, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	display: block;
	font-size: 30px;
    margin: 0px;
    line-height: 1;
}

h1.h2-font {
    font-family: 'SimplonMono', Arial, sans-serif;
}

header .sublabel, .sublabel address {
    font-size: 15px;
    font-style: normal;
}

address {
    font-size: 17px;
}

header h2 {
    color:#000;
}

header .outer-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .nav-wrapper {
    flex-direction: row;
}

header .logo-wrapper {
    margin-left:15px;
}

header .nav-wrapper a {
    display: inline-block;
    line-height: 1;
    font-family: 'SimplonMono', Arial, sans-serif;
    font-size: 20px;   
    padding:45px 15px;
    text-transform: uppercase;
}

header .nav-wrapper a.kontakt {
    position: relative;
    padding-left: 30px;
}

header .nav-wrapper a.kontakt i {
    position:absolute;
    top:50%;
    left:5px;
    transform: translateY(-50%);
}

header .nav-wrapper a.kontakt span {
	position: relative;
	z-index: 10;
}

header .nav-wrapper a.kontakt span.has-icon {
    padding-left:30px;
}

header .nav-wrapper a.kontakt:after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 15px;
    right: 0px;
    top: 34px;
    bottom: 36px;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(0, 0, 0);
    border-image: initial;
    border-radius: 2px;
    transition: 0.2s;
}

footer h2 {
    color:#fff;
    margin: 0px;
}

footer a {
    color:#fff;
}

footer nav a {
    margin-right: 15px;
}

footer nav a:last-child {
    margin-right: 0px;
}


footer .sublabel, footer small {
    margin-left:2px;
}

.footer-flex-wrapper .nav {
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.footer-flex-wrapper nav {
    width: 100%;
}

.footer-flex-wrapper, .weblink-wrapper, .inner-item-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.weblink-wrapper {
    justify-content: space-between;
    align-content: space-between;
    min-width: 1000px;
}

.footer-flex-wrapper {
    align-content: stretch;
    align-items: stretch;
}

.footer-flex-wrapper {
    width:100%;
    justify-content: space-between;
}

.footer-flex-wrapper .item-wrapper {
    margin-left: 25px;
    margin-right: 25px;
}

.footer-flex-wrapper .item-wrapper.contact {
    margin-left: 15px;
    margin-right: 45px;
}

.inner-item-wrapper {
    flex-direction: column;
    height: 55px;
    justify-content: space-between;
}

.sublabel, footer .nav {
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    margin: 0px;
}

.image-wrapper {
    background-size: cover;
    background-position: center center;
    height: calc(70vh - 230px);
    width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

.page .absolute-outer-image,
.single .absolute-outer-image {
    height: calc(70vh - 230px);
    min-height: 300px;
}

.video-wrapper .image-wrapper {
    height: 70vh;
}

.image-wrapper svg {
    position: absolute;
    left:-10px;
    width:110%;
    bottom:0px;
    z-index: 10;
}

.image-wrapper .logo-wrapper svg {
    position: relative;
    left:auto;
    width:inherit;
    bottom: auto;
    margin: 0px;
    padding:0px;
}

.animate {   
    stroke-dasharray: 2338.5;
    stroke-dashoffset: 2338.5;
    opacity: 0;
    stroke-width: 0;
    animation: out 10s ease forwards 1;
}

svg.galerie {
    bottom: inherit;
    top:20px;
}

.galerie .animate {
    animation: dash 10s ease forwards 1;    
}

@keyframes dash {
  from {
    stroke-dashoffset: 2338.5;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes out {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 2338.5;
  }
}

.image-wrapper:before {
    background-color: var(--pink);
    height:10px;
    content: "";
    top:0px;
    left:0px;
    width: 0px;
    z-index: 10;
    position: absolute;
}

.image-wrapper img {
    width: 100%;
    height: 100%;    
    object-fit: cover;
    position: relative;
    z-index: 0;
}

.image-wrapper .position-center, .image-wrapper .logo-wrapper {
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom: 0px;
    padding:20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 10;
    background-color:rgba(0,0,0,0);
    color:#fff;
    opacity: 1;
}

.image-wrapper .position-center .big-font {
    font-weight: 600;
    font-size: 60px;
    line-height: 100%;
}

.image-wrapper .position-center .btn {
    border:1px solid #fff;
    padding:5px 10px;
    background-color:#fff;
    color:#000;
    line-height: 1;
    display:block;
    margin-top:15px;
    opacity: 0;
}

.image-wrapper .position-center .btn:after {
    content:'\2192';
    padding-left: 5px;
}

h2, .h2-font {
    color:var(--pink);
    font-size: 15px;
    margin: 0px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 50px;
    position: relative;
}

.heading-wrapper h2 {
    margin-bottom: 0;
}

article h2 {
    font-size: 30px;
    color:#000;
    font-weight: 500;
}

.color-white {
    color:#fff;
}

section .h2-font {
    margin-bottom: 10px !important;
}

.content h2 {
    margin-top:50px;
    margin-bottom: 20px !important;
}

.text-wrapper {
    margin:25px 15px;
    margin-top:0px;
}

.text-wrapper h2, .text-wrapper .h2-font {
    display: block;
    background-color:#fff;
    z-index: 10;
}

.text-wrapper h2:after, .text-wrapper .h2-font:after {
    position: absolute;
    right:50px;
    z-index: 0;
    content:'\2192';
    max-width: 0px;
    overflow: hidden;
} 

.white-wrapper {
    background-color:#fff;
    z-index: 10;
    position: relative;
    padding-top:25px;
}

.image-wrapper .white-wrapper, .banner-header .white-wrapper, .video-wrapper .white-wrapper {
    background-color:transparent;
}

.outer-white-wrapper .outer-wrapper {
    position: relative;
}

.white-wrapper-left.outer-white-wrapper .outer-wrapper:after {
    content: "";
    background-color:transparent;
    width:100%;
    left:100%;
    height:100%;
    top:0px;
    z-index: 0;
    position: absolute;
}

.white-wrapper-left.outer-white-wrapper .outer-wrapper.dark-bg:after {
    background-color:#333;
}

.white-wrapper-left.outer-white-wrapper .outer-wrapper.primary-bg:after {
    background-color:var(--pink);
}

.outer-white-wrapper .outer-wrapper {
    position: relative;
}

.white-wrapper-left.outer-white-wrapper .outer-wrapper:after {
    content: "";
    background-color:transparent;
    width:100%;
    left:100%;
    height:100%;
    top:0px;
    z-index: 0;
    position: absolute;
}

.white-wrapper-left.outer-white-wrapper .outer-wrapper.dark-bg:after {
    background-color:#333;
}

.white-wrapper-left.outer-white-wrapper .outer-wrapper.primary-bg:after {
    background-color:var(--pink);
}

.white-wrapper-right.outer-white-wrapper .outer-wrapper:after {
    content: "";
    background-color:transparent;
    width:100%;
    right:100%;
    height:100%;
    top:0px;
    z-index: 0;
    position: absolute;
}

.white-wrapper-right.outer-white-wrapper .outer-wrapper.dark-bg:after {
    background-color:#333;
}

.white-wrapper-right.outer-white-wrapper .outer-wrapper.primary-bg:after {
    background-color:var(--pink);
}

.hover-wrapper ul, .hover-wrapper li, ul.normal, ul.normal li {
    list-style: none;
    margin: 0px;
    padding:0px;
    font-size: 20px;
    font-weight: 500;
    line-height: 120%;
    color: #000 !important;
    /* padding-bottom: 10px; */
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;    
}

.hover-wrapper ul, ul.normal {
    background-color:#fff;
    z-index: 10;
    position: relative;
}

ul.bullets li {
    margin-top: 1rem;
    align-content: center;
}

ul.bullets li i {
    font-size: 30px;
    width:50px;
    height:50px;
    border:2px solid #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

ul.bullets.with-icon li i {
    position: absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
}

ul.bullets.with-icon li {
    position: relative;
    padding-left:60px;
    min-height:60px;
    max-width: 420px;
}

.reverse-hover .hover-wrapper .image-wrapper .position-center {
	opacity: 1;
	padding-top:70px;
}

.reverse-hover .image-wrapper .position-center .btn {
	opacity: 0;
}

ul.normal.width-auto {
    width: auto;
}

ul.normal li {
    padding-bottom: 5px !important;
}

ul.normal {
    margin-bottom: 30px !important;
}

ul.normal.small-margin-bm {
    margin-bottom: 10px !important;
}

ul.leistungen-wrapper li {
    font-weight: 300;
}

.link {
    font-weight: 300;
    font-size: 15px;
    color:#000;
}

.info-text {
    margin-top:30px;
    margin-bottom: 30px;
    color:#000 !important;
    position: absolute;
    bottom:60px;
    margin-right: 50px;
    z-index: 0;
}

.content-wrapper {
    margin-bottom: 200px;
    z-index: 10;
    background-color:#fff;
    position: relative;
    width:100%;
    padding-bottom: 50px;
}

footer {
    width:100%;
    position: fixed;
    left:0px;
    bottom: 0px;
    height:200px;
    background-color:#000;
    z-index: 0;
    color:#fff;
    display: flex;
    align-content: center;
}

footer .row {
    display: flex;
    align-items: stretch;
}

footer .row .nav {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    margin-right: 15px;
}

.nav-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

footer .row .nav a {
    color:#fff;
    margin-left: 15px;
}

footer .contact {
    margin-left: 15px;
}

p.sublabel {
    margin-top:10px;
}

footer .icon {
    font-size: 42px;
    display: block;
}

footer .h2 {
    font-size: 17px;
    display: block;
    margin-top:0;
}

footer small {
    margin-top:0;
}

.clear {
    clear: both;
}

.nav {
    padding-left:15px;
}

.content a {
    text-decoration: underline;
}

.owl-nav {
    font-size: 25px;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
    border: 2px solid #000;
    border-radius: 100%;
    width:25px;
    line-height: 25px;
    height:25px;
    text-align: center;
    padding: 0px;
} 

.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel .owl-nav button.owl-next:focus, .owl-carousel .owl-nav button.owl-prev:focus {
    background:transparent;
    color:#000;
}

.dark-bg .owl-carousel .owl-nav button.owl-next:hover, .dark-bg .owl-carousel .owl-nav button.owl-prev:hover, .dark-bg .owl-carousel .owl-nav button.owl-next:focus, .dark-bg .owl-carousel .owl-nav button.owl-prev:focus {
    color:#fff;
}

.dark-bg .owl-carousel .owl-nav button.owl-next, .dark-bg .owl-carousel .owl-nav button.owl-prev {
    border-color: #fff;
}

.owl-carousel .owl-nav button.owl-next span, .owl-carousel .owl-nav button.owl-prev span {
    position: relative;
    top:-2px;
}

.marker span {
	position: relative;
	z-index: 10;
}

.marker svg {
	position: absolute;
    left: 50%;
    z-index: 0;
    width: 570px;
    height: auto;
    top: -19px;
    transform: translateX(-50%);	
}

.marker svg.small-marker {
	width: 280px;
    top: -3px;
}

.marker svg.medium-marker {
	width:470px;
	top:-10px;
}

.marker svg.normal-marker {
	width:370px;
	top:-10px;
}

.marker-bg p {
	position: relative;
	z-index: 10;
}

.marker-bg svg {
	position: absolute;
    z-index: 0;
    left: -20px;
    top: -10px;
    width: 70%;
    height: auto;
	opacity: 0.9;
}

.row-flex {
    display: flex;
    flex-wrap: wrap;
}

.flex-center {
    align-items: center;
}

svg.primary-marker {
    width:260px;
    height:auto;
    position: absolute;
    left:50%;
    bottom:57px;
    transform: translateX(-50%);
    z-index: 0;
}

.primary-marker .cls-1 {
    fill: var(--pink);
    opacity: 0.7;
}

.hover-visible span {
    z-index: 1;
}

.display-inline-block {
    display: inline-block;
}

.small-margin-top {
    margin-top: 15px;
}

.active-wrapper {
    position: relative;
}

.special-button i {
    width:40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left:26px;
    text-align: center;
    -webkit-text-stroke-width: 0px;
    top:10px;
    transition: all 0.2s ease;
}

.special-button.is-active i {
    height:40px;
}

.special-button i:after {
    content: "";
    position: absolute;
    width:30px;
    height:30px;
    border:0px solid #000;
    border-radius: 50%;
    transition: all 0.1s ease;    
}

.special-button.is-active i:after {
    width:40px;
    height:40px;
    border:2px solid #000;
}

ul.bullets.with-icon.reverse-bullets li {
    padding-left: 0px;
    padding-right: 70px;
}

ul.bullets.with-icon.reverse-bullets li i {
    right:0;
    left: auto;
    margin:0;
}

.reverse-bullets .intro {
    margin: 0;
}

@media (hover: hover) and (pointer: fine) {
	
	.reverse-hover a:hover .image-wrapper .position-center .btn {
		opacity: 1;
	}

	a.color-reverse-green:hover, a.button.color-reverse-green:hover {
		background-color:var(--marker);
        border-color:var(--marker);
	}    

	a.color-reverse-yellow:hover, a.button.color-reverse-yellow:hover {
		background-color:var(--yellow-marker);
        border-color:var(--yellow-marker);
	}   
    
	a.color-reverse-primary:hover, a.button.color-reverse-primary:hover {
		background-color:var(--pink);
        border-color:var(--pink);
	}       
	
	.reverse-hover a:hover .image-wrapper .position-center {
		background-color:transparent;
	}
	
	.reverse-hover a:hover .image-wrapper .position-center .big-font {
		opacity: 0.9;
	}
	
	.button.color-marker:hover {
		background-color:#000;
		color:#fff;
		border-color:#000;
	}	
	
	a:hover {
		cursor:pointer;
	}
	
	a.hover-link.color-white:hover {
		color:#fff;
		text-decoration: none;
	}
    
    /* .hover-wrapper:hover .image-wrapper:before {
        width:100%;
    } */
    
    a.hover-wrapper:hover .image-wrapper .position-center .btn, a.hover-wrapper:hover .image-wrapper .logo-wrapper {
        opacity: 1;
    }

    a.hover-wrapper:hover .image-wrapper .position-center {
        background-color:rgba(0,0,0,0.8);
    }
    
    a.hover-wrapper:hover .image-wrapper .position-center .btn:after {
        padding-left:10px;
    }
    
    footer a:hover {
        color:#fff;
        text-decoration: underline;
    }    
    
    header a:hover h2 {
        color:var(--pink);
    }
    
    /* .hover-wrapper:hover .image-wrapper, .hover-wrapper.is-active .image-wrapper {
        height: calc(100vh - 350px) !important;
        margin-bottom: 10px !important;
    }*/
    
    .content a:hover {
        color:var(--pink);
        text-decoration: none;
    }
    
    .hover:hover .hover-wrapper .image-wrapper {
        opacity: 0.7;
    }
    
    .hover .hover-wrapper:hover .image-wrapper {
        opacity: 1;
    }
    
    .hover-wrapper:hover .animate {
        animation: dash 2s ease forwards 1;
        opacity: 1;
        stroke-width: 10px;
    }
    
    .hover-wrapper:hover .galerie .animate {
        animation: out 2s ease forwards 1;
    }    
    
    .hover-wrapper:hover .text-wrapper h2:after, .hover-wrapper:hover .text-wrapper .h2-font:after {
        max-width: 200px;
        right: 10px;
    }
    
    .hover-wrapper:hover h2, .hover-wrapper.is-active h2 {
        margin-bottom: 20px !important;
    }
    
    /* .hover-wrapper:hover li, .hover-wrapper.is-active li {
        padding-bottom: 0px !important;
    } */
    
    .hover-wrapper:hover .link, .hover-wrapper.is-active .link {
        color:var(--pink);
    }
    
    header .nav-wrapper a:hover {
        background-color:#000;
        color:#fff;
    }
	
	header .nav-wrapper a.icon-wrapper:hover {
		background-color:transparent;
		color:var(--pink);
	}
	
	header .nav-wrapper a.kontakt:hover {
		background-color:transparent;
		color:#fff;
	}	
	
	header .nav-wrapper a.kontakt:hover:after {
		background-color:#000;
	}
    
    .webdesign header .nav-wrapper a.webdesign:hover, .fotografie header .nav-wrapper a.fotografie:hover, .konzepte header .nav-wrapper a.konzepte:hover, .ueber-mich header .nav-wrapper a.ueber-mich:hover, .referenzen header .nav-wrapper a.referenzen:hover {
        background-color:var(--pink);
        color:#fff;
        -webkit-text-stroke-color: #fff;
    }
    
}

@media (max-width:1300px) {
    
    .weblink-wrapper {
        min-width: inherit;
    }
    
}

@media (max-width:991px) {

    body .logo-wrapper svg.steinboc {
        max-width: 120px;
    }    

    ul.bullets.with-icon.reverse-bullets li {
        padding-left: 60px;
        padding-right: 0px;
    }

    ul.bullets.with-icon.reverse-bullets li i {
        right: auto;
        left: 0;
        margin:0;
    }

    .text-left-sm {
        text-align: left;
    }
    
    h2.h2-font {
        font-weight: 500;
    }
    
    h2.intro, .kontakt-wrapper .intro {
        margin-bottom: 0px;
    }  
    
    #bureau-wundersee .text-wrapper {
        margin-bottom: 45px;
    }
    
    .white-wrapper {
        padding-top: 0px;
    }

    .image-wrapper {
        height:30vh !important;
        margin-bottom: 20px !important;
    }    
    
    .text-wrapper h2, .text-wrapper .h2-font {
        margin-bottom: 10px !important;
    }
    
    .hover-wrapper ul, .hover-wrapper li {
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
    
    .white-wrapper {
        float:left;
        width:50%;
    }
    
    .info-text {
        float: right;
        width:50%;
        margin:0px;
        position: relative;
        bottom: auto;
        margin-top:65px;
    }
    
    .info-text:after {
        position: relative;
        content:"";
        clear: both;
    }
    
    .link {
        clear: both;
        float: none;
        display: block;
        margin-top:15px;
        margin-bottom: 50px;
    }
    
    .outer-wrapper {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    a .text-wrapper h2:after, a .text-wrapper .h2-font:after {
        max-width: 100px;
        right:-100%;
    }    
    
    .logo-hover a .text-wrapper h2:after, .logo-hover a .text-wrapper .h2-font:after {
        display: none;
    }
    
}

@media(max-width:767px) {

    .light-bg-xs {
        background-color: rgb(237, 237, 237);
    }

    .h3-font.special-button {
        display: flex;
        align-items: center;
        align-content: center;
    }

    .active-wrapper .h3-font.special-button {
        padding-left:78px;
    }    

    .marker.mobile-absolute {
        position: absolute;
        top:-170px;
        left:50%;
        transform: translateX(-50%);
        width:100%;
        padding:0 20px;
    }

    .marker.mobile-absolute .cls-1 {
        opacity: 1 !important;
    }
	
    body .marker svg {
        width: 406px;
        top: -15px;
    }	

    body .marker svg.size-2 {
        width: 436px;
        top: -4px;
    }

	.marker svg.small-marker {
		width: 200px;
        top: 1px;
	}	
	
	.marker svg.medium-marker {
    	width: 350px;
	}
	
	.marker svg.normal-marker {
    	width: 260px;
		top: -8px;
	}

    .marker svg.normal-marker.size-2 {
        width:370px;
        fill:#fff;
        top:auto;
        bottom: -21px;
    }

    ul.bullets.with-icon li i {
        left:-0.5px;
    }

	.marker-bg svg {
		left: 20px;
		width: 80%;
	}	

    a.button {
        padding: 8px 12px;
    }
    
    a .text-wrapper h2:after, a .text-wrapper .h2-font:after {
        max-width: 100px;
        right:7px;
    }    
    
    .outer-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    header {
        padding-top:20px;
        padding-bottom: 20px;
    }
    
    h1, footer h2, footer .icon {
        font-size: 30px;
    }

    .image-wrapper {
        margin-bottom: 15px !important;
    }    
    
    .text-wrapper {
        margin:15px 7px;
    }  
    
    .white-wrapper, .info-text {
        width:100%;
    }
    
    footer .row.flex-wrap {
        display: block;
    }
    
    footer .row .nav {
        text-align: left;
        margin-top:30px;
        justify-content: flex-start;
    }
    
    footer .contact {
        margin-left: 0px;
    }
    
    footer {
        height:250px;
    }
    
    .content-wrapper {
        margin-bottom: 250px;
    }
    
    footer .row .nav a {
        margin-left: 0px;
        margin-right: 15px;
    }
    
    footer .row nav {
        margin-top:10px;
    }
    
    .logo-wrapper {
        text-align: left;
    }
    
    header .icon {
        font-size: 30px;
        padding-right: 5px;
    }
    
    header .logo-wrapper {
        margin-left: 5px;
    }
    
    header .outer-wrapper {
        align-items: flex-start;
    }
    
}


/* Bureau */

/* White Block */

.outer-white-wrapper {
    position: relative;
    overflow: hidden;
}

.outer-white-wrapper .white-wrapper {
    padding-top: auto;
    background-color:transparent;
}

.image-wrapper .white-wrapper, .margin .white-wrapper, .absolute-outer-image .white-wrapper, .outer-white-wrapper .white-wrapper {
    z-index: 5;
    position: absolute;
    top: 0px;
    width: 100%;
    max-width: 1720px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
}

.image-wrapper .white-wrapper:after, .margin .white-wrapper:after, .absolute-outer-image .white-wrapper:after, .outer-white-wrapper .white-wrapper:after {
    content: "";
    background-color: #fff;
    z-index: 10;
    position: absolute;
    top: 0px;
    width: 100%;
    right: -100%;
    bottom: 0px;
}

.image-wrapper .white-wrapper.left:after, .margin .white-wrapper.left:after, .absolute-outer-image .white-wrapper.left:after, .outer-white-wrapper .white-wrapper.left:after {
    right: auto;
    left: -100%;
}

/* General */

.zitat {
    position: relative;
}

/* .zitat:after {
    content: "«";
    position: relative;
    display: inline-block;
    font-weight: 300;
    padding-left:5px;
} */

.zitat:before {
    content: "»";
    position: absolute;
    display: inline-block;
    font-weight: 300;
    width:25px;
    left:-25px;
    font-size: 40px;
}

.font-light {
    font-weight: 300;
}

.color-black {
    color:#000;
}

video, img {
    width:100%;
}

.video-container {
    position: relative;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.intro {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 30px;
    line-height: 120%;
    margin-bottom: 30px;
    display: inline-block;
}

.primary-bg {
    background-color:var(--pink);
    color:#fff;
}

.image-bg {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 50vh;
	min-height: 700px;
}

.svg-wrapper svg {
    width:100%;
    overflow:visible;
    top:-5px;
    position: relative;
}

.svg-wrapper path {
    stroke: var(--pink); 
    stroke-width: 5px;
    padding-left:10px;
}

.color-primary {
    color:var(--pink);
}

a.color-primary:hover {
	text-decoration: none;
    color:var(--pink);
}

.flex-stretch {
    display: flex;
    align-content: stretch;
    align-items: flex-end;
}

.flex-stretch.flex-center {
    align-items: center;
}

.kontakt-wrapper {
    margin-bottom: 40px;
    font-size: 22px;
    font-weight: 300;
}

.paper-outer-image-wrapper {
	display: flex;
	align-content: stretch;
    align-items: stretch;
}

.paper-outer-image-wrapper .paper-image-wrapper {
	margin:auto;
	text-align: center;
	width:100%;
	position: absolute;
    left:0px;
    right:0px;
    top:60px;
    bottom:60px;
    display: flex;
    align-items: stretch;
}

.paper-outer-image-wrapper .paper-image-wrapper .row {
    display: flex;
    align-items: stretch;    
}

.paper-outer-image-wrapper .paper-image-wrapper img {
	height:100%;
	width: auto;
}

.paper-image-wrapper img {
	object-fit: contain;	
}

.outer-video-wrapper {
    margin-top:100px;
}

.outer-video-wrapper svg.svg-class {
    position: absolute;
    top:30px;
    left:-60px;
    right:-60px;
    bottom: 0px;
    z-index: 0;
    overflow: visible;
}

.video-container {
    position: relative;
    z-index: 10;
}

.outer-video-wrapper path {
    stroke: var(--pink); 
    stroke-width: 5px;
    padding-left:10px;
}

.first-stroke path {
    stroke:#fff;
    stroke-width:10px;
}

.pause-img {
    position: absolute;
    z-index: 10;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    opacity: 0;
}

.is-paused .pause-img {
    opacity: 1;
}

.position-relative {
    position: relative;
}

.play-wrapper, .mute-wrapper {
    display: inline-block;
    position: relative;
    width:28px;
    height:28px;
    border:2px solid #202020;
    border-radius: 36px;
    text-align: center;
    padding-top:0px;
    padding-left:0px;
}

.dark-bg .play-wrapper, .dark-bg .mute-wrapper {
    background-color:#333;
}

.is-paused .play-wrapper {
    padding-left:2px;
}

.play {
    border: 0;
    background: transparent;
    box-sizing: border-box;
    width: 0;
    width: 0;
    height: 10px;
    border-style: double;
    border-width: 0px 0 0px 10px;
    border-color: transparent transparent transparent #202020;
    transition: 100ms all ease;
    cursor: pointer;

    display: inline-block;
}

.is-paused .play {
    border-width: 5px 0 5px 10px;
    border-style: solid;
}

.video-button-wrapper {
    margin-top:30px;
}

.video-button-wrapper.top-position {
    position: absolute;
    z-index: 12;
    bottom:30px;
    right:30px;
}

.video-button-wrapper.top-position .play-wrapper, .video-button-wrapper.top-position .mute-wrapper, .video-button-wrapper.top-position .mute-wrapper:after, .video-button-wrapper.top-position .mute-wrapper:before, .white-btn .play-wrapper, .white-btn .mute-wrapper, .video-container .white-btn .mute-wrapper:after, .video-container .white-btn .mute-wrapper:before, .video-auto-pause .white-btn .mute-wrapper:after, .video-auto-pause .white-btn .mute-wrapper:before {
    border-color:#fff;
}

.video-button-wrapper.top-position path, .white-btn path {
    fill:#fff;
}

.video-button-wrapper.top-position .play, .white-btn .play {
    border-color: transparent transparent transparent #fff;
}

.mute-wrapper svg {
    width:7px;
    top:-1px;
}

.mute-wrapper {
    text-align: left;
    padding-left:4px;
}

.is-muted .mute-wrapper:after, .is-muted .mute-wrapper:before {
    width:8px;
    height:1px;
    border-top: 1px solid #000;
    position: absolute;
    content:"";
    top:11px;    
    right:4px;
    border-radius: 100%;
}

.is-muted .mute-wrapper:after {
    transform: rotate(-45deg);
}

.is-muted .mute-wrapper:before {
    transform: rotate(45deg);
}

.mute-wrapper:after {
    width:5px;
    height:5px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-radius: 100%;
    position: absolute;
    content:"";
    top:9px;    
    right:7px;
    border-radius: 100%;
    transform: rotate(45deg);
}

.mute-wrapper:before {
    width:11px;
    height:11px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-radius: 100%;
    position: absolute;
    content:"";
    top:6px;    
    right:4px;
    border-radius: 100%;
    transform: rotate(45deg);
}

.bottom-position.video-button-wrapper {
    margin-top:15px;
    margin-right: 15px;
    margin-left:15px;
}

.video-container .controls {
    position: absolute;
    bottom: 48px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    opacity: 0.2;
    transition: opacity 0.4s;
}

.container .controls button {
    background: transparent;
    color: #fff;
    font-weight: bolder;
    text-shadow: 2px 1px 2px #000;
    border: none;
    cursor: pointer;
}
.video-container .controls .timeline {
    flex: 1;
    display: flex;
    align-items: flex-end;
    border: none;
    height:20px;
}
.video-container .controls .timeline .bar{
    background: rgb(1, 1, 65);
    height: 4px;
    flex: 1;
    position: relative;
}
.video-container .controls .timeline .bar .inner{
    background: #ccc;
    width: 0%;
    height: 100%;
    position: relative;
    z-index: 10;
}

.video-container .controls .timeline .bar .inner-top {
    background-color:red;
    background: #ccc;
    width: 0%;
    height: 100%; 
    position: absolute;
    z-index: 0;
}

.fa {
    font-size: 20px !important;
}

header .icon {
    font-size: 42px;
}

header .nav-wrapper a.icon-wrapper {
    padding-top:34px;
    padding-bottom: 34px;
}

.active-wrapper h2 {
    margin-bottom: 15px !important;
}

.active-wrapper h2.is-active {
    text-decoration: underline;
    color:var(--pink);
}

h4, .h4, .h4-font {
    font-size: 18px;
    font-weight: 500;
}

.active-wrapper .h3-font {
    opacity: 0.4;
    display: block;
}

.active-wrapper .h3-font.is-active {
    opacity: 1;
}

.web-image-wrapper {
    position: relative;
    width:100%;
    min-height: 600px;
    max-width: 690px;
    margin: auto;    
}

.web-wrapper .web-image-wrapper img, body .web-wrapper .web-image-wrapper img.is-active, .web-wrapper .web-image-wrapper .video-wrapper, .web-wrapper .web-image-wrapper .video-wrapper.is-active {
    position: absolute;
    z-index: 10;
    width:100%;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    opacity: 1;
}

.web-wrapper .web-image-wrapper .video-wrapper.is-paused img {
    opacity: 1;
}

.web-wrapper .web-image-wrapper .video-wrapper img {
    -webkit-box-shadow:none;
    box-shadow: none;
    position: absolute;
    top:0px;
    z-index: 0;
    width: inherit;
    left:auto;
    bottom: auto;
    right: auto;
    transform: none;
    opacity: 0;
}

.web-wrapper .web-image-wrapper .video-wrapper img.bg-right {
    right: 0px;
    bottom:0px;
    height: 100%;
    width: auto;
}

.web-wrapper .web-image-wrapper .video-wrapper img.bg-top {
    right: 0px;
    top:0px;
    width:100%;
}

.video-auto-pause .bg-play {
    position: absolute;
    z-index: 0;
    width:65px;
    opacity: 0;
}

.video-auto-pause.is-paused .bg-play {
    width:90px;    
    opacity: 0.9;    
}

.web-wrapper .web-image-wrapper .video-wrapper img.bg-play, .video-auto-pause .bg-play {
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
}

.web-wrapper .web-image-wrapper .video-wrapper.is-active img.bg-play {
    width:90px;    
}

.web-wrapper .web-image-wrapper .video-wrapper.is-paused img.bg-play {
    opacity: 0.9;
    width:65px;
}

.web-wrapper .web-image-wrapper .video-wrapper.is-paused.is-active img.bg-play {
    width:95px;
}

.web-wrapper .web-image-wrapper .video-wrapper img.bg-bottom {
    right: 0px;
    bottom:0px;
    width:100%;
    top: auto;
    z-index: 0;
}

.web-wrapper .web-image-wrapper img {
    left:30%;
    top:30%;
    z-index: 0;
    opacity: 1;
    border:0px solid var(--pink);
    width:90%;   
}

.web-wrapper .web-image-wrapper .video-wrapper video {
    border:0px solid var(--pink);
}

.web-wrapper .web-image-wrapper img, img.website, .web-wrapper .web-image-wrapper .video-wrapper video {
    border-radius: 5px;
    -webkit-box-shadow: 2px 1px 10px 5px rgba(0,0,0,0.28); 
    box-shadow: 2px 1px 10px 5px rgba(0,0,0,0.28);     
}

.web-wrapper .web-image-wrapper .video-wrapper video {
    border-radius: 0px;
}

.web-wrapper .web-image-wrapper .video-wrapper {
    width: 35%;
    top:42%;
    left:6%;
    z-index: 5;
}

.web-wrapper .web-image-wrapper .video-wrapper.firmenportrait {
    width: 112%;
    top: 42%;
    left: 32%;    
}

.web-wrapper .web-image-wrapper .video-wrapper.animation {
    width: 90%;
    left:17%;
    top: 20%;    
}

.web-wrapper .web-image-wrapper .video-wrapper.is-active {
    width: 48%;
    top:45%;
    left:35%;
}

.web-wrapper .web-image-wrapper .video-wrapper.social-media {
    top: 35%;
}

.web-wrapper .web-image-wrapper .video-wrapper.animation.is-active {
    width: 108%;
    top: 50%;
    left: 36%;
}

.web-wrapper .web-image-wrapper .video-wrapper.social-media.is-active {
    top:45%;
}

.web-wrapper .web-image-wrapper .video-wrapper.is-active.firmenportrait {
    width: 108%;
    top: 55%;
    left: 35%;
}

.web-wrapper .web-image-wrapper img.image-3 {
    left:70%;
    top:40%;
}

.web-wrapper .web-image-wrapper img.image-3.is-active {
    top:30%;
    left:60%;
}

.web-wrapper .web-image-wrapper img.image-1.gestaltung {
    left:64%;
}

.web-wrapper .web-image-wrapper img.image-3.marketing {
    border-radius: 5px;
    left: 43%;
    top: 41%;
}

.web-wrapper .web-image-wrapper img.image-2.kommunikation {
    left:20%;
}

.web-wrapper .web-image-wrapper img.image-3.marketing.is-active {
    top:45%;
    left:35%;
}

.web-wrapper .web-image-wrapper img.image-4 {
    left:20%;
    top:60%;
    width:60%;
}

.web-wrapper .web-image-wrapper img.image-4.is-active {
    top:60%;
    width:60%;
}

.web-wrapper .web-image-wrapper img.image-1 {
    left:20%;
    top:40%;
    z-index: 5;
}

.web-text-wrapper {
    opacity: 0.4;
}

.web-text-wrapper strong {
    font-weight: 400;
    letter-spacing: 0.3px;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: #000;    
}

.web-text-wrapper.is-active {
    opacity: 1;
}

strong {
    font-weight: 500;
    letter-spacing: 0px;
}

.web-text-wrapper.is-active strong {
    letter-spacing: 0.3px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
}

.web-text-wrapper h3 {
    font-size: 15px;
    text-transform: uppercase;
}

.web-text-wrapper .zitat, .zitat.normal {
    font-size: 30px;
    font-weight: 300;
    line-height: 120%;
    margin-bottom: 25px;
}

.website-1 {
    position: absolute;
    z-index: 0;
    left:0px;
    top:-30px;
}

.website-2 {
    z-index: 10;
    position: relative;
    width:60%;
    top:10%;
    display: block;
    left:50%;
}

.website-3 {
    position: absolute;
    z-index: 0;
    left:0px;
    top:50px;
}

.website-3.analysias {
    top:-30%;
}

.website-3.diagramm {
    top: 21%;
}

.website-4 {
    z-index: 10;
    position: relative;
    width:75%;
    top:10%;
    display: block;
    left:20%;
}

.item {
    opacity: 0.4;
}

.owl-exhibition .owl-item .item {
    opacity: 1;
}

.active.center .item {
    opacity: 1;
}

svg.buehler {
    width:250px;
    margin-top:30px;
    margin-bottom:100px;
}

svg.simutence {
    width:350px;
    margin-top:30px;
    margin-bottom:100px;    
}

.logo-wrapper svg.buehler {
    width:25%;
    max-width: 75px;
}

.logo-wrapper svg.buehler.bigger-logo {
    width: 50%;
    max-width: 285px;
}

.logo-wrapper svg.steinboc {
    width:50%;
    max-width: 190px;
}

.logo-wrapper svg.steinboc.bigger-logo {
    width:50%;
    max-width: 300px;
}

.logo-wrapper svg.simutence {
    width:30%;
    max-width: 150px;    
}

.logo-wrapper svg.simutence.bigger-logo {
    width:50%;
    max-width: 550px;    
}

svg.steinboc {
    width:210px;
    margin-top:30px;
    margin-bottom:100px;
}

svg.buehler path, svg.steinboc path, svg.simutence path {
    fill:#333;
}

.dark-bg svg.buehler path, .logo-wrapper svg.buehler path, .logo-wrapper svg.steinboc path, .logo-wrapper svg.simuntence path, .dark-bg svg.steinboc path, .dark-bg svg.simutence path {
    fill:#fff;
}

.dark-bg {
    background-color:#333;
    color:#fff;
}

.dark-bg ul, .dark-bg ul.normal li {
    background-color: transparent;
    color:#fff !important;
}

.bergmann-2 {
    position: absolute;
    right:-10%;
    width:50%;
    top:-20%;
}

a.hover-link {
    text-decoration: underline;
}

.exhibition-wrapper a.hover-link {
    text-decoration: none;
}

a.button, a.button:hover {
	padding:10px 15px;
	border:1px solid #000;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
}

a:hover {
    color:#000;
    text-decoration: none;
}

a.button.color-primary {
	border-color:var(--pink);
	background-color: var(--pink);
	color:#fff;
}

a.button.color-black {
	border-color:#000;
	background-color: #000;
	color:#fff;
}

.height-150 img {
    height:150px;
    width:auto;
} 

.about-wrapper img {
    opacity: 0.6;
}

.about-wrapper img.is-active {
    opacity: 1;
}

.about-wrapper h2 {
    display: block;
    margin-bottom: 5px !important;
}

.about-wrapper h2 a.is-active {
    color:var(--pink);
    text-decoration: underline;
}

.bottom-hover .image-wrapper, .bottom-hover .hover-wrapper:hover .image-wrapper, .bottom-hover .hover-wrapper.is-active .image-wrapper {
    height:500px !important;
    margin-bottom:20px !important;
}

.overflow-hidden {
    overflow: hidden;
}

svg.doodle {
    position: absolute;
    top:0px;
    left:50%;
    bottom:0px;
    height:100%;
    width: auto;
}

svg.doodle path {
    fill:transparent;
    stroke-width: 5px;
    stroke:#c2cfd5;
}

.paper-outer-image-wrapper .paper-image-wrapper img.stift {
    position: absolute;
    z-index: 10;
    top: 0px;
    left: 15px;    
}

.flex-wrap {
    flex-wrap: wrap;
}

.row.same-height {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
}

.row.same-height .video-button-wrapper {
    position: absolute;
    bottom:-43px;
}

.row.same-height > div {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;   
    position: relative;
}

.row.same-height > div img.image-cover {
    object-fit: cover;
    width:100%;
    height:100%;
    position: relative;
}

.mobile-open {
    font-family: carlmarx, sans-serif;
    font-size: 30px;
    margin-top:10px;
}

.mobile-open .hamburger {
    top:2px;
    position: relative;
    padding-left:0px;
}

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

.outer-padding-site {
	padding-left: 15px;
	padding-right: 15px;
}

/* Padding */

.big-padding-bottom, .big-padding-bm {
    padding-bottom: 120px;
}

.big-padding-top, .web-wrapper.big-padding-top {
    padding-top: 120px;
}

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

.normal-padding-top {
    padding-top: 30px;
}

.normal-padding-bottom, .normal-padding-bm {
    padding-bottom: 30px;
}

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

.inner-padding {
    padding-left:15px;
    padding-right: 15px;
}

/* Margin */

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

.no-margin {
    margin: 0px;
}

.smallest-margin-top {
    margin-top:15px;
}

.smallest-margin-bm, .smallest-margin-bottom {
    margin-bottom:15px;
}

.medium-margin-top {
    margin-top:25px;
}

.medium-margin-bottom, .medium-margin-bm {
    margin-bottom:25px;
}

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

.margin-bottom, .margin-bm {
    margin-bottom:50px;
}

.big-margin-top {
    margin-top:130px;
}

.big-margin-bottom, .big-margin-bm {
    margin-bottom:130px;
}

.biggest-margin-top {
	margin-top:200px;
}

.biggest-margin-bottom, .biggest-margin-bm {
	margin-bottom:200px;
}

.no-margin-bm, .no-margin-bottom {
    margin-bottom: 0px;
}

.display-none {
	display: none;
}

.action-button {
	position: relative;
	margin-top:11px;
	margin-right: 18px;
}

.action-button.is-active {
	opacity: 0;
}

.action-button a, a.action-btn, body header .nav-wrapper .mobile-wrapper a.action-btn {
	color:#fff;
	background-color:#000;
	padding:5px 10px 4px;
	line-height: 1;
	color:#000;
	border:2px solid #000;
	background-color:transparent;
	font-size: 90%;
	text-transform: uppercase;
	border-radius: 2px;
	font-weight: 500;
}

.kontakt a.action-btn, .protophase a.action-btn {
	display: none !important;
}

.action-button a:after {
	content: "→";
	display: inline-block;
	padding-left: 0px;
	max-width: 0px;
	overflow: hidden;
	top: 1px;
	position: relative;	
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;	
}

.action-button.arrow a:after {
	padding-left: 5px;
	max-width: 200px;
}

.action-button a:hover {
	background-color:#000;
	color:#fff;
}

.action-button a:hover:after {
	color:#fff;
}

.action-button a {
	position: relative;
	z-index: 10;
}

.action-button svg {
	position: absolute;
    z-index: 0;
    left: -12px;
    width: 137px;
    top: -5px;
    height: auto;
	display: none;
}

.mobile-outer-wrapper {
	display: flex;
}

.mobile-banner {
    margin-bottom: 40px;
    max-height: 300px;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.mobile-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 0;
}

.mobile-marker-absolute {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width:100%;
    text-align: center;
}

.mobile-marker-absolute .intro {
    position: relative;
    z-index: 1;
    max-width: 380px;
    margin-bottom: 0;
}

.mobile-marker-absolute svg {
    position: absolute;
    z-index: 0;
    left:50%;
    transform: translateX(-50%);
    width: 218px;
    bottom: 6px;
    height: auto;
}

.mobile-marker-absolute svg.size-2 {
    width: 318px;
    bottom: -7px;
}

.mobile-marker-absolute svg.size-3 {
    width:340px;
    bottom:-4px;
}

.mobile-marker-absolute svg.size-4 {
    width: 169px;
    bottom: 15px;
}

.mobile-marker-absolute svg.color-green .cls-1 {
    fill:var(--marker);
}

.mobile-marker-absolute svg.color-lila .cls-1 {
    fill:var(--third-marker);
}

.mobile-marker-absolute .cls-1 {
     opacity: 1;
}

@media (hover: hover) and (pointer: fine) {  

	a.color-primary:hover {
		text-decoration: underline;
	}	

    a.button.color-black:hover {
        border-color:var(--pink);
        background-color: var(--pink);
        color:#000;
    }    
	
	a.button.color-primary:hover {
		text-decoration: none;
		border-color:#000;
		background-color:#000;
		color:#fff;
	}
    
    .video-auto-pause.is-paused:hover .bg-play {
        width: 85px;
    }
    
    .about-wrapper img:hover, .about-wrapper img.is-hover {
        opacity: 1;
    }

    .item:hover {
        opacity: 1;
    }    
    
    a.hover-link:hover {
        text-decoration: none;
        color:var(--pink);
    }

    a.hover-link:hover article {
        color:#000;
    }
    
    .active-wrapper .h3-font:hover {
        opacity: 0.6;
    }
    
    .active-wrapper .h3-font.is-active:hover {
        opacity: 1;
    }    
    
    .about-wrapper h2:hover a, .about-wrapper h2.is-hover a {
        padding-left:10px;
    }
    
    .about-wrapper h2:hover a {
        text-decoration: none;
        color:#000;
    }

    .about-wrapper h2:hover a.is-active {
        color:var(--pink);
        text-decoration: underline;
        padding-left:0px;
    }    
    
    .video-container:hover .controls {
        opacity: 1;
    }
    
    .web-wrapper .web-image-wrapper img:hover, .web-wrapper .web-image-wrapper .video-wrapper video:hover {
        opacity: 1;
        border-width: 10px;
    }
    
    .web-wrapper .web-image-wrapper .video-wrapper img:hover {
        border-width: 0px;  
        opacity: inherit;
    }  

    .web-wrapper .web-image-wrapper img.is-active:hover, .web-wrapper .web-image-wrapper .video-wrapper.is-active video:hover {
        border-width: 0px;
    }    
    
    .video-container:hover .controls .timeline .bar .inner {
        background:var(--pink);
    }
    
    .play-wrapper:hover, .mute-wrapper:hover {
        background-color:#202020;
    }
    
    .mute-wrapper:hover:after, .mute-wrapper:hover:before {
        border-color:#fff;
    }
    
    .mute-wrapper:hover path {
        fill:#fff;
    }
    
    .play-wrapper:hover .play {
        border-color: transparent transparent transparent #fff;
    } 
    
    .video-button-wrapper.top-position .play-wrapper:hover, .video-button-wrapper.top-position .mute-wrapper:hover {
        background-color:#fff;
    }
    
    .video-button-wrapper.top-position .mute-wrapper:hover:after, .video-button-wrapper.top-position .mute-wrapper:hover:before {
        border-color:#000;
    }
    
    .video-button-wrapper.top-position .mute-wrapper:hover path {
        fill:#000;
    }
    
    .video-button-wrapper.top-position .play-wrapper:hover .play {
        border-color: transparent transparent transparent #000;
    }     
    
}

@media(max-width:1600px) {
    
    .big-margin-top {
        margin-top: 60px;
    }

    .image-wrapper .position-center .big-font {
        font-size: 45px;
    }
}

@media (max-width:1300px) {

    header .nav-wrapper a, a.button, a.button:hover {
        font-size: 18px;
    }

    header .logo-wrapper {
        margin-left: 0px;
    }

    header .nav-wrapper a.icon-wrapper {
        padding-right: 0px;
    }

    header .nav-wrapper a.kontakt {
        padding-left: 23px;
    }

    header .nav-wrapper a.kontakt:after {
        top: 35px;
    }    

}

@media (max-width:1199px) {  
    
    .big-margin-bm-md, .big-margin-bottom-md {
        margin-bottom: 50px;
    }
    
    .big-margin-top-md {
        margin-top: 50px;
    }     
    
    .weblink-wrapper {
        width: 100%;
    }
    
    .footer-flex-wrapper .nav {
        justify-content: flex-start;
        margin-top:30px;
    }
    
    .footer-flex-wrapper .nav nav {
        text-align: left;
        margin-top: 20px;
    }    

    .video-auto-pause .bg-play {
        width:55px;
    }

    .video-auto-pause.is-paused .bg-play {
        width:70px;    
    }    
    
    .image-wrapper .position-center .big-font {
        font-size: 40px;
    }

    .outer-video-wrapper svg.svg-class {
        top: -50px;
    }
    
    header .nav-wrapper a {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    header .nav-wrapper a.icon-wrapper {
        padding-right: 15px;
    }
    
    .margin-top-md {
        margin-top:30px;
    }
    
    .active .item {
        opacity: 1;
    } 
    
    .active:last-of-type .item {
        opacity: 0.5;
    }     
    
    .intro, .web-text-wrapper .zitat, .zitat.normal {
        font-size: 28px;
    }
    
    .kontakt-wrapper {
        font-size: 20px;
    }
    
    .outer-padding-md, .outer-wrapper {
        padding-left:30px;
        padding-right: 30px;
    }
    
    .margin-bottom-md, .margin-bm-md {
        margin-bottom: 30px;
    }
    
    svg.doodle {
        left:17%;
    }
    
    .outer-video-wrapper {
        margin-top:0px;
    }
    
    .break-md {
        hyphens: auto;
    }

    .height-150 img {
        height: 110px;
        width: auto;
    }  

    .big-padding-top, .web-wrapper.big-padding-top {
        padding-top: 100px;
    }
    .big-padding-bottom, .big-padding-bm {
        padding-bottom: 100px;
    } 

    svg.buehler {
        width: 210px;
        margin-top: 0px;
        margin-bottom: 90px;
    }   
    
    .web-wrapper {
        padding-top: 0px;
    }  
    
    .image-wrapper .white-wrapper, .margin .white-wrapper, .absolute-outer-image .white-wrapper, .outer-white-wrapper .white-wrapper {
        display: none;
    }

    header .nav-wrapper a {
        font-size: 18px;
        padding-top: 46px;
        padding-top: 46px;
    }    
    
    .web-text-wrapper {
        opacity: 1;
    }
    
    .web-wrapper .web-image-wrapper .video-wrapper.is-paused.is-active img.bg-play {
        width: 65px;
    }
    
    .web-wrapper .web-image-wrapper .video-wrapper.is-active img.bg-play {
        width: 60px;
    }

    .web-wrapper .web-image-wrapper .video-wrapper.is-paused img.bg-play {
        width: 45px;
    }    
    
}

@media(max-width:991px) {

    .website-3.analysias {
        top:10%;
        width:70%;
    }    
	
	.outer-contact-wrapper {
		display: flex;
		justify-content: space-between;
	}
    
    .item-wrapper.contact {
        width:100%;
        margin-bottom: 20px;
    }
    
    footer {
        height: 310px;
    }
    
    .content-wrapper {
        margin-bottom: 310px;
    }

    main.content-wrapper {
        padding-top:10px;
    }
    
    footer .item-wrapper:nth-of-type(2) {
        margin-left:15px;
    }    
    
    .no-flex-sm {
        display: block;
    }

    .padding-top, .padding-top-sm {
        padding-top: 30px;
    }
    .padding-bottom, .padding-bottom-sm, .padding-bm-sm {
        padding-bottom: 30px;
    } 

    .svg-wrapper svg {
        top: -35px;   
    }
    
    .height-150 img {
        height: 70px;
    }

    .bottom-hover .image-wrapper, .bottom-hover .hover-wrapper:hover .image-wrapper, .bottom-hover .hover-wrapper.is-active .image-wrapper {
        height: 280px !important;
    }    
    
    .text-left-sm {
        text-align: left;
    }

    .intro, .web-text-wrapper .zitat, .zitat.normal {
        font-size: 25px;
    }  
    
    .no-padding-top-sm {
        padding-top:0px;
    }
    
    .flex-wrap-sm {
        flex-wrap: wrap;
    }
    
    .outer-padding-sm {
        padding-left:15px;
        padding-right: 15px;
    }
    
    .intro.zitat, .web-text-wrapper .zitat, .zitat.normal {
        padding-left:30px;
    }
    
    .intro.zitat:before, .web-text-wrapper .zitat:before, .zitat.normal:before {
        left:0px;
    }
    
    .big-margin-top-sm {
        margin-top:50px;
    }

    .big-margin-bm-sm, .big-margin-bottom-sm {
        margin-bottom:50px;
    }
    
    .text-normal-sm {
        text-align: inherit;
    }
    
    .no-outer-padding-sm {
        padding:0px;
    }
    
    .web-text-wrapper {
        display: none;
    }
    
    .web-text-wrapper.is-active {
        display: block;
        min-height: 30vh;
    }
    
    .active-wrapper h2 {
        margin-right: 10px;
        margin-left: 10px;
    }
    
    .text-center-sm {
        text-align: center;
    }
    
    .web-wrapper .web-image-wrapper img, .web-wrapper .web-image-wrapper img, body .web-wrapper .web-image-wrapper img.is-active, .web-wrapper .web-image-wrapper img.image-3, .web-wrapper .web-image-wrapper img.image-4 {
        width:70%;
    }
    
    .web-wrapper .web-image-wrapper img.image-4.is-active {
        width:45%;
    }
    
    .web-wrapper .web-image-wrapper img.image-4 {
        width:40%;
    }

    .image-bg {
        min-height: 500px;
    }  
    
    .owl-theme .owl-nav.disabled+.owl-dots {
        margin-top:30px;
    }
    
    .big-margin-bm-sm, .big-margin-bottom-sm {
        margin-bottom: 50px;
    }
    
    .big-margin-top-sm {
        margin-top: 50px;
    } 
    
    header .nav-wrapper a.icon-wrapper {
        padding-top:25px;
    }

    .mobile-wrapper {
        max-height: 0px;
        overflow: hidden;
        position: absolute;
        top:100px;
        left:0px;
        right:0px;
        z-index: 100;
        background-color: #fff;
        text-align: left;
        padding-left: 45px;
		padding-right: 45px;
    }
    
    .mobile-wrapper.is-active {
        max-height: 1000px;
        padding-bottom: 20px;
    }
    
    header .nav-wrapper .mobile-wrapper a {
        display: block;
        padding:5px 0px;
        margin-bottom: 5px;
    }   
	
	header .nav-wrapper .mobile-wrapper a.kontakt {
		display: inline-block;
		border:2px solid #000;
		padding:9px 10px 6px;
		line-height: 1;
		margin-left:-10px;
		border-radius: 2px;
		margin-top:5px;
	}
	
	header .nav-wrapper .mobile-wrapper a.kontakt:after {
		display: none;
	}
    
    .img-bottom img {
        object-position: bottom;
    }
    
    .image-top-sm img {
        object-position: top;
    }

    .biggest-margin-top {
        margin-top: 100px;
    }
	
    .biggest-margin-bm, .biggest-margin-bottom {
        margin-bottom: 100px;
    }	
    
    .video-container .controls .timeline .bar .inner {
        background:var(--pink);
    }
    
    .video-container .controls {
        opacity: 1;
    }
    
    .small-margin-bottom-sm {
        margin-bottom: 20px;
    }
    
    section .h2-font.no-margin-bm-sm {
        margin-bottom: 0px !important;
    }
    
    header {
        position: fixed;
        top:0px;
        z-index: 100;
        left:0px;
        right:0px;
        background-color:#fff;
    }
    
    main {
        padding-top:101px;
    }
    
    .add-hover a .image-wrapper .position-center, .hover-wrapper div .image-wrapper .position-center {
        background-color: rgba(0,0,0,0.5);
        opacity: 1;
        justify-content: flex-end;
    }
	
	.reverse-hover .hover-wrapper .image-wrapper .position-center {
		padding-top:20px;
	}
    
    .add-hover a .image-wrapper .position-center .btn {
        color:#fff;
        border:none;
        background-color:transparent;
		opacity: 1;
    }

    .add-hover.mobile-marker-wrapper a .image-wrapper .position-center .btn {
        margin-top:15px;
    }
    
    .add-hover a .text-wrapper h2, .add-hover a .text-wrapper .h2-font {
        display: none;
    }
    
    .add-hover.logo-hover a .text-wrapper h2, .add-hover.logo-hover a .text-wrapper .h2-font {
        display: block;
    }    
    
    .add-hover a .image-wrapper .position-center .big-font, .hover-wrapper .image-wrapper .position-center .big-font {
        font-size: 43px;
    }
    
    .add-hover a .leistungen-wrapper {
        text-align: center;
    }

    .add-hover a .leistungen-wrapper.bullets.with-icon {
        text-align: left;
    }
    
    .add-hover.logo-hover a .leistungen-wrapper {
        text-align: left;
    }    
    
    .add-hover.logo-hover > a:nth-of-type(2) .leistungen-wrapper {
        text-align: right;
    }
    
    .add-hover a .white-wrapper {
        float: none;
        margin: auto;
        text-align: center;
    }
    
    .add-hover.logo-hover a .white-wrapper {
        margin: inherit;
    }
    
    .text-wrapper-hover-sm .text-wrapper {
        position: absolute;
        background-color:rgba(0,0,0,0.5);
        top:0px;
        left: 15px;
        right: 15px;
        bottom: 20px;
        z-index: 10;
        margin: 0px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        text-align: center;
        align-content: center;
        align-items: center;
    }
    
    .text-wrapper-hover-sm .text-wrapper .white-wrapper {
        background-color:transparent;
    }
    
    .text-wrapper-hover-sm .text-wrapper .leistungen-wrapper {
        background-color:transparent;
        margin-bottom: 20px !important;
    }
    
    .text-wrapper-hover-sm .text-wrapper .leistungen-wrapper li {
        color:#c8d0d2 !important;
        padding-bottom: 2px !important;
    }
    
    .text-wrapper-hover-sm .text-wrapper .leistungen-wrapper li {
        color:#000 !important;
    }
    
    .text-wrapper-hover-sm .text-wrapper h2, .text-wrapper-hover-sm .text-wrapper .h2-font {
        background-color:transparent;
        color:#fff;
        font-size: 38px;
        line-height: 110%;
    }
    
    .dropdown-wrapper {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color:#f8f8f8;
        border:1px solid #333;
        padding-top:40px;
        padding-bottom: 40px;       
    }
    
    .outer-dropdown-wrapper {
        padding-top:0px;
        margin-top:0px;
    }
    
    .active-wrapper .h3-font {
        border:1px solid #333;
        padding-top:10px;
        padding-bottom: 10px;
        width: 83.33333333%;
        margin-left: 8.33333333%;
        opacity: 1;
        color:#666666;
        border-bottom: inherit;
        font-weight: 400;
    }
    
    .active-wrapper .h3-font:first-of-type {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .active-wrapper .h3-font.is-active {
        color:#000;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #000;
        background-color:#d7d7d7;
    }
    
    .top-outer-dropdown-wrapper {
        padding-left: 0px;
        padding-right: 0px;
    }
    
    .web-wrapper .web-image-wrapper .video-wrapper {
        width: 26%;
        top: 42%;
        left: 24%;
    }
    
    .web-wrapper .web-image-wrapper .video-wrapper.is-active {
        width: 40%;
        top: 39%;
    }
    
    .web-wrapper .web-image-wrapper img.image-2.is-active.kommunikation {
        left: 35%;
        width: 80%;
    }
    
    .image-change-sm .image-wrapper {
        width:60%;
        left: 40%;
    }
    
    .text-wrapper-hover-sm.image-change-sm .text-wrapper {
        width:40%;
        left:15px;
        background-color:#ededed;
        justify-content: center;
        flex-direction: row;
        align-content: stretch;
        align-items: stretch;
        padding: 15px 15px 30px 15px;
    }
    
    .text-wrapper-hover-sm.image-change-sm.logo-hover .text-wrapper {
        justify-content: flex-end;
        padding-bottom: 20px;
    }
    
    .text-wrapper-hover-sm.image-change-sm > div:nth-of-type(2) .text-wrapper, .text-wrapper-hover-sm.image-change-sm > a:nth-of-type(2) .text-wrapper {
        right:15px;
        left: auto;
        text-align: right;
    }
    
    .text-wrapper-hover-sm.image-change-sm > div:nth-of-type(2) .image-wrapper, .text-wrapper-hover-sm.image-change-sm > a:nth-of-type(2) .image-wrapper {
        right:auto;
        left: 0px;
    }    
    
    .text-wrapper-hover-sm.image-change-sm .text-wrapper .white-wrapper {
        width:100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: left;
    }
    
    .text-wrapper-hover-sm.image-change-sm > div:nth-of-type(2) .text-wrapper .white-wrapper, .text-wrapper-hover-sm.image-change-sm > a:nth-of-type(2) .text-wrapper .white-wrapper {
        text-align: right;
    }
    
    .text-wrapper-hover-sm.image-change-sm .text-wrapper .leistungen-wrapper {
        margin-bottom: 0px !important;
    }
    
    .text-wrapper-hover-sm.image-change-sm .text-wrapper h2, .text-wrapper-hover-sm.image-change-sm .text-wrapper .h2-font {
        font-size: 20px;
        color:var(--pink);
        font-weight: 500;
    }

    .margin-bottom-sm {
        margin-bottom: 20px;
    }
    
    .bigger-font.intro {
        font-size: 35px;
    }

    .logo-wrapper svg.steinboc.bigger-logo {
        max-width: 200px;
    }   

    .normal-padding-top-sm {
        padding-top:50px;
    }

}

@media (max-width:767px) {

    .home .image-wrapper, .home .absolute-outer-image, .page-template-page-bureau .image-wrapper, .page-template-page-bureau .absolute-outer-image {
        height: auto !important;
    }

    .mobile-margin-top,
    .new-margin-header.margin.banner-header {
        margin-top:86px;
    }

    .mobile-margin-top .new-margin-header.margin.banner-header {
        margin-top:0px;
    }

    .website-3.analysias {
        top:10%;
        left:-10%;
        width:80%;
    }    

    .website-4 {
        width: 80%;
        top: 0%;
        left: -30%;
    }

    .website-3.pipeline {
        left: -15%;
        top: 10%;
        width: 200%;
    }

    .website-4.textanalyse {
        left:30%;
        width:90%;
    }

    .web-wrapper .web-image-wrapper .video-wrapper.social-media {
        width: 46%;
        left: 50%;
    }    

    .web-wrapper .web-image-wrapper .video-wrapper.animation.is-active {
        width: 96%;
        top: 62%;
        left: 50%;
    }

    .web-wrapper .web-image-wrapper .video-wrapper.is-active.firmenportrait {
        width: 98%;
        top: 55%;
        left: 50%;
    }    

    .logo-wrapper svg.steinboc.bigger-logo {
        max-width: 120px;
    }    

    ul.inline-wrapper {
        padding-bottom: 20px;
    }

    ul.inline-wrapper.bullets.with-icon li i, ul.inline-wrapper-xs.bullets.with-icon li i {
        left:6px;
    }

    .add-hover.mobile-marker-wrapper a .image-wrapper .position-center .big-font {
        color:#fff;
    }

    .intro-wrapper {
        position: relative;
        z-index: 1;
        padding:0 20px;
        max-width: 370px;
        left:50%;
        transform: translateX(-50%);
    }
        
    .primary-xs {
        color:var(--pink);
    }

    footer {
        height: 550px;
        padding-bottom: 10px;
    }
    
    .content-wrapper {
        margin-bottom: 550px;
    }    
    
    footer .footer-flex-wrapper  .item-wrapper {
        margin-left:15px;
        width: 100%;
        margin-bottom: 20px;
    } 
    
    .image-change-sm.text-wrapper-hover-sm ul.leistungen-wrapper li {
        font-size: 14px;
        hyphens: auto;
    }
    
    .text-wrapper-hover-sm.image-change-sm .text-wrapper h2, .text-wrapper-hover-sm.image-change-sm .text-wrapper .h2-font {
        font-size: 18px;
    }
    
    .image-change-sm .image-wrapper {
        width: 60%;
        width: calc(60% + 25px);
        left: 40%;
        left: calc(40% - 5px);
    } 
    
    .text-wrapper-hover-sm.image-change-sm > div:nth-of-type(2) .image-wrapper, .text-wrapper-hover-sm.image-change-sm > a:nth-of-type(2) .image-wrapper {
        left: -20px;
    }
    
    .text-wrapper-hover-sm.image-change-sm .text-wrapper {
        width: 40%;
        width: calc(40% - 5px);
        left: 10px;
        padding: 15px 10px 30px 10px;   
    }
    
    .text-wrapper-hover-sm.image-change-sm > div:nth-of-type(2) .text-wrapper, .text-wrapper-hover-sm.image-change-sm > a:nth-of-type(2) .text-wrapper {
        right: 10px;
    }
    
    .web-wrapper .web-image-wrapper .video-wrapper.is-active {
        width: 60%;
        top: 45%;
    }    
    
    .top-outer-dropdown-wrapper h2 {
        padding-left:15px;
        padding-bottom: 5px;
    }
    
    .active-wrapper .h3-font {
        width: 100%;
        margin-left: 0%;
        padding-left:15px;
        height: 35px;
        overflow: hidden;
        position: relative;
    }
    
    .active-wrapper .h3-font:before {
        content: "Mehr";
        font-size: 14px;
        font-weight: 300;
        position: absolute;
        right:15px;
        bottom: 0px;
        line-height: 1;
    }
    
    .active-wrapper .h3-font:after {
        position: absolute;
        bottom:0px;
        height:10px;
        left:0px;
        right:0px;
        background: rgb(0,0,0);
        background: -moz-linear-gradient(0deg, rgba(0,0,0,0.10270045518207283) 0%, rgba(0,0,0,0) 100%);
        background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.10270045518207283) 0%, rgba(0,0,0,0) 100%);
        background: linear-gradient(0deg, rgba(0,0,0,0.10270045518207283) 0%, rgba(0,0,0,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
        content:"";
    }
    
    .active-wrapper .h3-font.is-active:after {
        height:0px;
    }
    
    .active-wrapper .h3-font.is-active {
        height: 43px;
    }

    .active-wrapper .h3-font.is-active.special-button {
        height: 63px;
    }    
    
    .active-wrapper .h3-font.is-active:before {
        opacity: 0;
    }
    
    .dropdown-wrapper {
        padding-top:20px;
        padding-bottom: 20px;
    }
    
    ul.no-margin-bm-xs {
        margin-bottom: 0px !important;
    }
    .no-margin-bm-xs {
        margin-bottom: 0px;
    }
    
    .mobile-open .hamburger {
        top: -2px;
        padding-bottom: 7px;
        padding-top: 7px;
    }
    
    .text-wrapper {
        margin-bottom: 30px;
    }

    .outer-padding-md, .outer-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }    

    .image-wrapper {
        max-height: 240px;
        min-height: 200px;
    }    
    
    .hover-wrapper ul li, ul.leistungen-wrapper li {
        font-size: 18px;
        font-weight: 300;
    }

    .text-wrapper h2, .text-wrapper .h2-font {
        margin-bottom: 10px !important;
        font-weight: 500;
    }
    
    .intro, .web-text-wrapper .zitat, .zitat.normal {
        font-size: 21px;
    }

    .inner-padding {
        padding-left: 5px;
        padding-right: 5px;
    }  
    
    .kontakt-wrapper {
        font-size: 18px;
    }
    
    .info-text {
        margin-top:5px;
    }

    .kontakt-wrapper {
        margin-top:30px;
    }

    .svg-wrapper svg {
        top: -66px;
    }   
    
    .svg-wrapper path {
        stroke-width: 14px; 
    }
    
    .no-outer-padding-xs {
        padding:0px;
    }

    .padding-bottom, .padding-bottom-sm, .padding-bm-sm {
        padding-bottom: 20px;
    }
    
    .margin-top-xs {
        margin-top: 30px;
    }
    
    .outer-video-wrapper svg {
        display: none;
    }
    
    .outer-video-wrapper .mute-wrapper svg {
        display: inline-block;
    }
    
    .mobile-wrapper {
        padding-left:25px;
		padding-right: 25px;
    }
    
    .text-right-xs {
        text-align: right;
    }

    .image-bg {
        min-height: inherit;
        max-height: 350px;
        padding:0px;
    }    

    .biggest-margin-top {
        margin-top: 50px;
    } 
	
    .biggest-margin-bm, .biggest-margin-bottom {
        margin-bottom: 50px;
    } 	
    
    .outer-video-wrapper {
        margin-left:-20px;
        margin-right: -20px;
    }
    
    .text-center-xs {
        text-align: center;
    }
    
    .padding-bm-xs {
        padding-bottom: 20px;
    }
    
    .padding-top-xs, .normal-padding-top {
        padding-top:20px;
    }
    
    .big-padding-top-xs {
        padding-top:40px;
    } 
      
    .no-margin-top-xs {
        margin-top:0px;
    }
    
    .no-margin-bm-xs, .no-margin-bottom-xs {
        margin-bottom: 0px;
    }    
    
    .no-padding-top-xs {
        padding-top:0px;
    }   
    
    .no-padding-bm-xs, .no-padding-bottom-xs {
        padding-bottom: 0px;
    }    

    svg.buehler {
        width: 190px;
        margin-bottom: 60px;
    }    
    
    .outer-padding-xs {
        padding-left: 7px;
        padding-right: 7px;
    }
    
    .item .zitat {
        margin-bottom: 20px;
        margin-top:20px;
    }
    
    .margin-bm-xs {
        margin-bottom: 20px;
    }
	
	.normal-margin-bm-xs {
		margin-bottom: 60px;
	}

	.small-margin-top-xs {
		margin-top: 20px;
	}  
    
	.small-margin-bm-xs {
		margin-bottom: 20px;
	}      

    ul.bullets li i {
        font-size: 21px;
        width: 40px;
        height: 40px;
    }

    ul.bullets.with-icon li {
        padding-left: 55px;
        min-height: 40px;
    }
    
    .overflow-hidden-xs {
        overflow: hidden;
        padding-top:20px;
    }

    .no-outer-padding-sm {
        padding: 0px;
    } 

    .web-wrapper .web-image-wrapper img, img.website {
        -webkit-box-shadow: 2px 1px 10px 5px rgba(0,0,0,0.2);
        box-shadow: 2px 1px 10px 5px rgba(0,0,0,0.2);
    }    
    
    img.rosilene {
        width:150%;
        margin-left: 30px;
    }

    .website-1 {
        left: -10%;
        top: 20px;
        width: 90%;
    } 
    
    .website-2 {
        left: 40%;
        width: 60%;
    }   
    
    .active-wrapper h2 {
        display: block;
        margin: auto;
        margin-bottom: 5px !important;
    }

    .web-text-wrapper.is-active {
        display: block;
        min-height: 360px;
    }
    
    .text-left-xs {
        text-align: left;
    }
    
    .web-text-wrapper h3 {
        display: none;
    }

    .web-image-wrapper {
        min-height: 440px;
        max-width: 450px;
        left:50%;
        transform: translateX(-50%);
    }    

    .web-wrapper .web-image-wrapper img, .web-wrapper .web-image-wrapper img, body .web-wrapper .web-image-wrapper img.is-active, .web-wrapper .web-image-wrapper img.image-3 {
        width: 100%;
    }    
    
    .web-wrapper .web-image-wrapper img.image-4 {
        width:55%;
    }

    .web-wrapper .web-image-wrapper img.image-4.is-active {
        width: 65%;
    }   

    .intro.zitat, .web-text-wrapper .zitat, .zitat.normal {
        padding-left: 0px;
    }   
    
    .flex-wrap-xs {
        flex-wrap: wrap;
    }
	
	.outer-padding-site {
		padding-left: 7px;
		padding-right: 7px;
	}	
    
    .small-margin-top-xs {
        margin-top:20px;
    }
    
    .leistungen-wrapper, .leistungen-wrapper li {
        position: relative
    }
    .leistungen-wrapper li {
        z-index: 10;
    }
    
    .leistungen-headline {
        display: block;
        width:100%;
        position: relative;
    }
    
    .leistungen-headline:after {
        position: absolute;
        content:"";        
        background-color:#e2e2e2;
        top:5px;
        left:-20px;
        right: -20px;
        bottom: -10px;
        z-index: 0;
    }
    
    .dark-bg .leistungen-headline:after {
        background-color:#111;
    }
    
    .leistungen-headline h3, .leistungen-headline h4 {
        z-index: 10;
        position: relative;
        font-size: 21px;
        margin-top:20px;
        margin-bottom: 30px;
        display: inline-block;
        line-height: 120%;
    }
    
    .leistungen-wrapper:after {
        position: absolute;
        content:"";
        background-color: #ededed;
        top:-20px;
        left:-20px;
        right: -20px;
        bottom: -10px;
        z-index: 0;
    }
    
    .text-wrapper .leistungen-wrapper:after {
        display: none;
    }
    
    .dark-bg .leistungen-wrapper:after {
        background-color: #222;
    }
    
    h4.color-grey-xs {
        color: #6c6c6c;
    }
    
    .intro.zitat:before, .web-text-wrapper .zitat:before, .zitat.normal:before {
        display: inline-block;
        position: relative;
        top: 4px;   
        font-weight: 300;
    }
    
    .intro.zitat, .web-text-wrapper .zitat, .zitat.normal {
        font-weight: 400;
        margin-bottom: 10px;
        font-size: 20px;
        line-height: 140%;
    }    
    
    .small-padding-bm-xs {
        padding-bottom: 20px;
    }
    
    .logo-wrapper a {
        border:2px solid #000;
        border-radius: 50%;
        width:50px;
        height:50px;
        text-align: center;
        display: inline-block;
    }
    
    .logo-wrapper .icon {
        font-size: 27px;
        padding-right: 0px;
        line-height: 1;
        position: relative;
        top:9px;
    }

    .fixed-header .logo-wrapper .icon {
        top:2px;
    }
    
    .mobile-open {
        margin-top: 0px;
    }
    
    .add-hover a .image-wrapper .position-center .big-font, .hover-wrapper .image-wrapper .position-center .big-font {
        font-size: 27px;
    }
    
    .add-hover a .image-wrapper .position-center .btn {
        margin-top:0px;
        padding-bottom: 0px;
    }
    
    ul.normal {
        margin-bottom: 10px !important;
    }
    
    .mobile-wrapper {
        top:76px;
    }

    .nav-up .mobile-wrapper {
        top:66px;
    }
    
    .outer-dropdown-wrapper {
        padding-left:15px;
        padding-right: 15px;
    }
    
    .dropdown-wrapper {
        border:none;
        background-color:#ededed;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 0px;
    }
    
    .active-wrapper .h3-font {
        margin-left: -5px;
        margin-right: -5px;
        width:100%;
        width: calc(100% + 10px);
        position: relative;
        border:none;
        border-radius: 0px;
        border-top:2px solid #d7d7d7;
        height: auto;
        height: 43px;
        padding-left:20px;
        padding-right: 20px;
    }
    
    .active-wrapper .h3-font:first-of-type {
        border-radius: 0px;
    }
    
    .active-wrapper .h3-font:after {
        display: none;
    }
    
    .active-wrapper .h3-font:before {
        bottom:10px;
        color:#999;
    }
    
    .text-wrapper-hover-sm .text-wrapper {
        bottom: 0px;
    }
    
    .text-wrapper-hover-sm .text-wrapper h2, .text-wrapper-hover-sm .text-wrapper .h2-font {
        font-size: 26px; 
    }
	
    .text-wrapper-hover-sm .text-wrapper .leistungen-wrapper {
        margin-bottom: 10px !important;
    }
    
    .text-wrapper .link {
        margin-top:10px;
        margin-bottom: 20px;
        display: none;
    }
    
    .web-wrapper .web-image-wrapper .video-wrapper.is-paused.is-active img.bg-play {
        width: 46px;
    }
    
    .web-wrapper .web-image-wrapper .video-wrapper.is-active img.bg-play {
        width: 40px;
    }

    .web-wrapper .web-image-wrapper .video-wrapper.is-paused img.bg-play {
        width: 25px;
    }    
    
    svg.simutence {
        width: 230px;
        margin-top: 0px;
        margin-bottom: 60px;
    }    
    
    svg.steinboc {
        width: 160px;
        margin-top: 0px;
        margin-bottom: 50px;
    }   
    
    .video-auto-pause .bg-play {
        width:35px;
    }

    .video-auto-pause.is-paused .bg-play {
        width:55px;    
    }     
    
}

@media (max-width:350px) {
    
    .text-wrapper-hover-sm.image-change-sm .text-wrapper {
        width: 61%;
        width: calc(60% + 5px);
    }
    
    .image-change-sm .image-wrapper {
        width: 41%;
        width: calc(40% + 5px);
        left: 60%;
        left: calc(60% - 5px);
    }    
    
}

@media (max-width:1199px) and (min-width:992px) {
    
    .dark-bg-md {
        background-color:#333;
        color:#fff;
        padding-top:70px;
        padding-bottom: 30px;
        margin-top:50px;
        margin-bottom: 50px;
    }
    
    .no-margin-top-md {
        margin-top:0px;
    }
    
}

@media (min-width:767px) and (max-width:991px) {
    
    .dark-bg-sm {
        background-color:#333;
        color:#fff;
        padding-top:70px;
        padding-bottom: 30px;
        margin-top:50px;
        margin-bottom: 50px;
    }
    
    .dark-bg-sm .owl-carousel .owl-nav button.owl-next, .dark-bg-sm .owl-carousel .owl-nav button.owl-prev {
        border-color:#fff;
    }
    
}

@media (max-width:992px){

    .page .absolute-outer-image, .single .absolute-outer-image {
        height:30vh;
    }

}

@media (max-width:767px){

    .page .absolute-outer-image, .single .absolute-outer-image {
        height:auto;
    }

}