@font-face {
  font-family: 'Baloo Thambi 2';
  src: url("baloo-thambi-2.woff2");
}

@font-face {
  font-family: 'Aref Ruqaa';
  src: url("aref-ruqaa.woff2");
}

@font-face {
  font-family: 'Vollkorn';
  src: url("vollkorn.woff2");
}
@font-face {
  font-family: 'Crimson';
  src: url("crimson.woff2");
    font-style: normal;
  font-weight: 600;
  font-display: swap;
}


@font-face {
  font-family: 'Material';
  font-style: normal;
  font-weight: 400;
  src: url('material-icons.woff2') format('woff2');

} 



*
{
margin: 0;
padding: 0;
border: none;
outline: none;
}



.material {
	  font-family: 'Material';
	  font-size:40px;
	transition: all 1s;
}
.material:hover {transition: all 1s;}
a {text-decoration:none;}



body 
{
background:#fb6d01;
border-bottom: 1px solid #004400;
border-top: 1px solid #004400;
box-shadow: 0px 10px 5px silver;
font-family: 'Baloo Thambi 2', cursive;
font-size: 18px;  
}
.clear
{
clear: both;
}



header { 
  position:sticky;
  top:0px;

  font-family: 'Vollkorn';
z-index:799;
}

.inheader{
	display:flex; 
	align-items:center; justify-content:center; width:100%; margin:0 auto; justify-content: space-around; background:#fb6d01;

}

@media screen and (max-width: 800px) {
header {}
}


#datenschutztext,#impressumtext{
	position:fixed;
	overflow:auto;
	background: #fb6d01;
	color:#fff;
	border-radius:10px;
	border: 1px solid #09c;
	position:fixed;
	top:-20px;
	padding:0px;
	left:50%;
	right:50%;
	width:0%;
	height:0%;
	z-index:100000006;
	transition: all 2.5s;
}




#datenschutztext:hover,#impressumtext:hover{background: #fed8aa; z-index:99999999999;}
#datenschutztext:target,#impressumtext:target{top:100px; width:50%; height:75%; 	padding:10px; margin-left:-25%; z-index:99999999999;}

@media screen and (max-width: 800px) {
	#datenschutztext:target,#impressumtext:target{top:90px; width:90%; height:75%; 	padding:10px; margin-left:-49%;}
}




article, article p {font-size: 1.7vw; text-align:justify; color:#e0e4df;}
@media screen and (max-width: 800px) {
	article, article p {font-size: 16px; padding:0 12px 0 12px;}
}

li{
	list-style-type: circle;
}

p
{
padding: 10px 0;
color: #e0e4df;
line-height:1.2;
font-size:1.8vw;
}

h1
{
font-size: 40px;
font-weight: normal;
font-family: 'Crimson';
color: #000;
font-weight: bold;
}
h2
{          
font-size: 32px;
color: #fb6d01;
font-family: 'Crimson';

}
h3
{
font-family: 'Crimson';
font-size: 24px;
font-weight: normal;
color: #000;
}


a {text-decoration:none;}


.box a {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

.box a::before,
.box a::after {
 content: '';
  position: absolute;
  width: 100%;
  left: 0;
}
.box a::before {
  background-color: #fb6d01;
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform .8s cubic-bezier(0.76, 0, 0.24, 1);
}
.box a::after {
  content: attr(data-replace);
  height: 100%;
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
  transition: transform .8s cubic-bezier(0.76, 0, 0.24, 1);
  color: #fb6d01;
}

.box a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
.box a:hover::after {
  transform: translate3d(0, 0, 0);
}

.box a span {
  display: inline-block;
  transition: transform .8s cubic-bezier(0.76, 0, 0.24, 1);
}

.box a:hover span {
  transform: translate3d(-200%, 0, 0);
}





.wrapper {
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 10px;
  background:#eee;
  width:100%;

}




.box {
		display: flex;
	flex-direction: column;
	justify-content: center;
		align-items: center;
		color:#222!important;
		
}

.box p {color:#222; font-size:2.1vw; line-height:1.2;}

	
@media screen and (max-width: 700px) {
	.wrapper{grid-template-columns: 100%;}
	.box p{font-size:5.5vw;}
}
	
	
.wrapper2 {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-gap: 10px;
  width:100%;

}

.wrapper3 {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 10px;
  width:100%;

}


.box2 {
		display: flex;
	flex-direction: column;
	justify-content: center;
		align-items: center;

		
}


video {width:100%;}



	
@media screen and (max-width: 700px) {
	.wrapper2,.wrapper3{grid-template-columns: 100%;}
	.box2 {}
	video {width:100%;  }
}
	
	
	
	#logo {
position:relative;
display:inline-block;
max-width:40%;
max-height:160px;
margin:0 auto;
filter: invert(100%);
padding:10px;
align-self: end;
}


	#galerieheader{	margin: 0 auto; max-width:1500px; text-align:center;}
	

	#incontent
	{
	margin: 0 auto;  
	padding: 10px;
		width:100%;
 	max-width: 1200px;

	}
	

	

	
	
	
#abstand {
	height:120px;
}

#footer
{
	position:relative;
	width:100%;
border-top: 1px solid #0044;
background: #fb6d01;  
color: #e0e4df;
margin: 0 auto;
width:100%;
background:#fb6d01;
}
	#infooter
	{
text-align:center;
padding: 10px; 
color: #000; 

	}
	#footer a
	{
	color: #000;
	text-decoration: none;
	}
	#footer a:hover
	{
	text-decoration: underline;
	color:#fff;
	transition:all 1s;
	}


.weartikelbox {
    display: inline-block;
    height: 600px;
    margin: 5px;
    padding: 10px;
    vertical-align: top;
    width: 800px;
	background-color: #f3f1f6;
	color:#f6781d;
	border: 2px solid #111;
	border-radius: 10px; 
	font-size:15px;
	overflow: hidden;
	transition: 1.5s all;
}
.weartikelbox p {
    margin: 15px 0;
}

.weartikelbox li {
    color: #000;
}

.weartikelbox img {
    display: block;
	border-radius:10px 25%;
    margin: 0 auto;
	width: 100%;
}
.weartikelbox h4 {
    display: block;
    height: 30px;
    overflow: hidden;
    text-align: center;
}


.weartikelbox:hover{
	background-color: #fff;
	color:#fff;
	border: 2px solid #fb6d01;
	transition: 2.5s all;
}

@media screen and (max-width: 800px) {
.weartikelbox 
{max-width:325px;}

}