@charset "UTF-8";
/* CSS Document index kk */

@font-face {src: url("../typo/kk_typo/AcuminVariableConcept.otf");
		font-family: acumin;}
@font-face {src: url("../typo/kk_typo/Lato-Light.ttf");
	font-family: Lato-Light;}
@font-face {src: url("../typo/kk_typo/Lato-Bold.ttf");
	font-family: Lato-Bold;}
@font-face {src: url("../typo/kk_typo/Lato-Black.ttf");
	font-family: Lato-Black;}
@font-face {src: url("../typo/kk_typo/Lato-Regular.ttf");
	font-family: Lato-Regular;}
@font-face {src: url("../typo/kk_typo/Cousine-Regular.ttf");
	font-family: cousine;}

/*braun rgba(96,36,33,1.00)
gelb rgba(248,176,0,1.00)
blau rgba(13,133,176,1.00)
braun hover rgba(81,30,27,1.00)
gelb hell rgba(253,231,178,1.00)
*/

body{box-sizing: border-box;
	margin-top: 0;
	background-color: rgba(96,36,33,1.00);
	}

.wrapper{margin:0rem auto;
		max-width: 75rem;
	}

.header {display: flex;
		z-index: 1000;
		position: fixed;
		width: 75rem;
		border-bottom: rgba(248,176,0,1.00) solid 2rem;
		}
.mob-header{display: none}

.wrap-move{max-width: 75rem;
	position: absolute;
	overflow: hidden;}

.typo{position: relative;
	left: -3.95rem;} 

/* C E N T E R */

h1{color: rgba(248,176,0,1.00);
	font-family: Lato-Black;
	font-size: 2rem;
	line-height: 2.5rem;
	padding-left: 1.5rem;}

.Head{background-color: rgba(48,176,0,0.00);
	width: 30rem;
	height:30rem;
	margin-top: 100rem;}

.flex-1{display: flex;
	flex-direction: row;
	width: 100%;
	/*background-color: #EAAA26;*/
	padding-top: 12rem;}

.left{width: 15%;
	background-color: rgba(248,176,0,1.00);
	}

.center{width: 70%;
	height: 400rem;
	background-color: rgba(248,176,0,1.00);
	padding-top: 3rem;}

.center img{width: 16.5rem;}

figure {
	position: relative;
	display: inline-block; 
	background-color:rgba(96,36,33,1.00);
	overflow:hidden;/**/
}

/*FX Startseite*//*figcaption positionierung auf dem Bild*/
figcaption {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;/**/
	display: flex;
	justify-content: left;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	margin-top: 0.6rem;
	margin-bottom: 0;
	padding: 0;
	align-items:center;
	
	color: rgba(13,133,176,1.00) ;
	font-size: 4.2rem;
	font-family: acumin;
	font-variation-settings: 'wght' 800, 'wdth' 50, 'slnt' 0;
	text-align:left;
	line-height: 0.95;
	text-transform: uppercase;
	filter: opacity(0);}


.effekt:hover figcaption {
	filter: opacity(100%);
	transition: ease-in-out 2s;
}/**/

.effekt img{
	transition: 
		filter 3s, 
		transform 1s ease-in-out 4s;
}

.effekt:hover img {
	filter: opacity(6%) grayscale(100%);
	transition: 
		filter 1s, 
		transform 1s ease-in-out 2s;
}

.releases, figure {
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	gap: 1.5rem;/**/
	color:rgba(96,36,33,1.00);
	margin:0 auto;/**/
}

.releases p {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	background-color:rgba(96,36,33,1.00);
	color: rgba(248,176,0,1.00);
	padding:0.625rem;
	font-family:Lato-Bold;
	letter-spacing: 0.05rem;
	font-size: 1.1rem;
}






.right{	width: 15%;
	background-color: rgba(248,176,0,1.00);}


@media (max-width:43.75rem) {
	.left {display: none;}
	.right {display: none;}
	.navi {display: none;}
	.sticky_header {display: none}
	.navi-1 {display: none;}
	.navi-2 {display: none;}
	.navi-3 {display: none;}
	.navi-4 {display: none;}
	body {margin: 0;
		background-color: rgba(248,176,0,1.00)}
	.flex-1{display: flex; padding-top: 3rem;}
	.center{width: 100%; height: auto;}
	.mob-header{
		overflow:auto;
		background-color: rgba(248,176,0,0.30);
		display:flex; 
		height: 15vh;
		position: fixed; z-index: 1000;
		left: -12.5%;
		top: 00rem;
	}
	.wrapper{min-width: 100%; 
	margin: 0; overflow: hidden}
}
/*aus Vorlage*/



/*Ende Vorlage*/

.navi{height: auto; 
	width: 11.25rem;
	padding-top: 4rem;
	position: fixed;
	
		}

.navi a{color: rgba(248,176,0,1.00);
	text-decoration: none;
	font-family: Lato-Bold;
	font-size: 1.25rem;
	line-height: 2.5rem;
	padding-left: 1.5rem;
	
	}

.navi div{background-color: rgba(96,36,33,1.00);
	height: 2rem;
	width: 9.5625rem;
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
	position: relative;
	right: -1.8rem;
	border-radius: 0.5rem 0 0 0.5rem;
	}

/*Animationen*/
.move{animation-name: move-1;
	  animation-duration: 180s;
	  animation-iteration-count: infinite;}

@keyframes move-1 {
	0%  {transform: translateX(-16rem);}
	
}/**/
.navi-1:hover {transition: 1s;
	background-color: rgba(81,30,27,1.00);} 
.navi-2:hover {transition: 1s;
	background-color: rgba(81,30,27,1.00);} 
.navi-3:hover {transition: 1s;
	background-color: rgba(81,30,27,1.00);} 
.navi-4:hover {transition: 1s;
	background-color: rgba(81,30,27,1.00);} 
.navi-5:hover {transition: 1s;
	background-color: rgba(81,30,27,1.00);} 

a:hover {transition: 1s;
	font-family: Lato-Black;
	color: rgba(248,176,0,1.00);
	letter-spacing: .05rem;
}

a:active, a:focus {
	font-family: Lato-Black;
	letter-spacing: .05rem;
	background-color: rgba(81,30,27,0.30);
}