@font-face {
  font-family: 'CrayonAL-German';
  src: url('../fonts/crayon.eot');
  src: url('../fonts/crayon.eot%3F') format('embedded-opentype'),
         url('../fonts/crayon.woff2') format('woff2'),
         url('../fonts/crayon.woff') format('woff'),
         url('../fonts/crayon.ttf') format('truetype'),
         url('../fonts/crayon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

#SceneArticleHeader {
    min-height: 50vh;
}

#SceneArticleHeader .grid {
        background-size: contain;
        background-position: bottom;
        background-repeat: no-repeat;
        padding-bottom: 15em;
}

#SceneArticleHeader h1 {
    font-family: 'CrayonAL-German';
    text-transform: none;
    font-size: 5em;
    position: relative;
}

#SceneArticleHeader .Schreibmaschine {
	position: absolute;
	z-index: 8;
	right: 15%;
	top: -50vH;
}

#SceneArticleHeader .Tisch {
    position: absolute;
    z-index: 1;
    width: 100%;
    bottom: 0;
}


#SceneContent {
	z-index: 9;
    box-shadow: 0 0 1em rgb(0 0 0 / 80%);
    padding: 5em 0;
}
#SceneContent .Niete {
    position: absolute;
    max-width: 4em;
    top: 2em;
}
#SceneContent .Niete.n1 {
	left: 4vW;
}
#SceneContent .Niete.n2 {
    right: 2vW;
    top: 5vW;
}
.ArticleImage {
	display: block;
	margin: 0 auto 2em;
	width: 30em;
    max-width: 97% !important;
    border: 15px solid #fff;
    border-image: url(../../../../../assets/Uploads/Animationen/ArtikelSzene/Rahmen.png) 30;
    box-shadow: -0.4em 0.2em 0.5em rgb(0 0 0 / 30%);
    -webkit-backface-visibility: hidden;
    transform: rotate(-3deg);
}

.Client {
	height: 100vH;
}
.Client .swiper-container{
	box-shadow:0 0 11em rgba(255,255,255,.3);
	
	width: 100%;
	clip-path:polygon(0% 0%, 100% 0%, 100% 95%, 74% 95%, 69% 100%, 64% 95%, 0% 95%);
	-webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 95%, 74% 95%, 69% 100%, 64% 95%, 0% 95%)
}
.Client .swiper-container .grid{
	text-align:center;
	margin:0 !important;
	height: 100%;
}
.Client .self-align-center{
	padding:0 3em;
}
.Client .vertAlign {
	position: relative;
	top: 50%;
	transform: translate(0,-50%);
}
.Client img{
	margin-bottom:5em;
	width: 80%;
}
.Client .hero{
	background-size:cover;
	background-position:0 center;
	clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 56%, 4% 50%, 0% 44%);
	-webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 56%, 4% 50%, 0% 44%);
	transition:6s background-position ease-in-out 3s
}


@media (max-width: 767px){
    
    #SceneArticleHeader {
	    height: auto;
	    min-height: 50vH;
    }
    
    #SceneArticleHeader .container, #SceneArticleHeader .grid {
	    padding-bottom: 0;
	    height: 100%;
	}
	
    #SceneArticleHeader h1 {
	    font-size: 3em;
	    margin-top: 2em;
	}
	
	#SceneArticleHeader .Tisch {
		width: 200vW;
	    left: 50vW;
	    transform: translate(-50%,0);
	}
	
	#SceneArticleHeader .Schreibmaschine {
		display: none;
	}
	
}

@media (min-width: 1100px){
	#SceneArticleHeader h1 {
		max-width: 80vW;
	}
}