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

@font-face {
  font-family: 'Great Vibes';
  src: url("great-vibes.woff2");
}


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

}  
  


*
{
margin: 0;
padding: 0;
border: none;
outline: none;
box-sizing:border-box;
}



body 
{
font-family: 'Baloo Thambi Two', cursive;
font-size: 18px;  
background:#fceaa0;

}



#datenschutztext,#impressumtext,#haftungtext,#partyservice{
	position:fixed;
	overflow:auto;
	background: rgba(0,0,0,0.6);
	color:#ebba8a;
	border-radius:10px;
	border: 1px solid #000055;
	position:fixed;
	top:-20px;
	padding:0px;
	left:50%;
	right:50%;
	width:0%;
	height:0%;
	z-index:100000006;
	transition: all 2.5s;
	backdrop-filter: blur(2px);
}


#datenschutztext p,#impressumtext p, #haftungtext p{color:#fff;}
#datenschutztext h1,#impressumtext h1,#haftungtext h1{color:#fff;}
#datenschutztext h2,#impressumtext h2,#haftungtext h2{color:#fff;}
#datenschutztext a, #impressumtext a,#haftungtext a{text-decoration:none; color:#fff;}
#datenschutztext:hover,#impressumtext:hover,#haftungtext:hover {background: rgba(0,0,0,0.95);}
#datenschutztext:target,#impressumtext:target,#haftungtext:target {top:100px; width:50%; height:75%; 	padding:10px; margin-left:-25%;}
#partyservice:target {width:70vw; height:40vw; margin-left:-35vw; top:50px;}

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

.material-mobile {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 60px;

  color:#006600;

}

.material-navunten {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  color:#eee;
  padding:2px;
			display: table-cell;
			vertical-align: middle;

}

.materialfest {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 50px;
  	display:flex;
	justify-content : center;
	width:60px;
	height:60px;
 color:#c73d38;
  text-decoraion:none;
  position:sticky;
  top:32px;
  float:right;
  transition: 2s all; 
}

.materialfest:hover {	color:#c73d38;	transition:all 1s;	border-radius:50%;	border:1px solid #c73d38; transform: rotate(360deg);}


li{
	list-style-type: circle;
}

p
{
padding: 12px 0;
color: #363636;
line-height:1.5;
}
h1
{
font-size: 40px;
font-weight: normal;
font-family: 'Great Vibes';
color: #eb6020;
font-weight: bold;
}
h2
{          
font-size: 32px;
font-weight: normal;
color: #eb6020;
font-family: 'Great Vibes';
font-weight: bold;
}
h3
{
font-family: 'Great Vibes';
font-size: 24px;
font-weight: normal;
color: #eb6020;
}
a
{
color: #eb6020;
transition: 4s all;
}
a:hover
{
color: #000;
text-decoration: none;
transform: scale(1.7);
}




#header
{
	height:260px;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1000;
padding: 20px 10px;



	
	width:100%;
text-align:center;
text-valign:top;
margin:0 auto;
display:flex;
align-items : flex-start;
justify-content: space-around;
background-repeat: no-repeat;
 background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 3425 256"><path fill="%23ddf0d2" d="M3425 0l-3425 0 0 169c6,-3 39,-6 50,-8l263 -25c36,-1 69,-6 112,-5 27,0 83,-2 112,-4 22,-1 61,0 86,0l85 4c9,1 20,0 29,0 12,0 16,2 27,2 39,0 74,5 112,5 71,1 368,38 418,47l200 32c34,5 68,10 101,15 112,15 203,24 323,24 34,0 80,-4 112,-4 19,0 95,-5 110,-7 114,-12 197,-22 310,-38 18,-3 33,-4 51,-6 28,-4 131,-13 161,-14 29,-1 59,-4 83,-4 13,0 18,-2 29,-2l171 -2c22,0 37,2 58,2 12,0 18,1 27,2 9,1 20,0 29,0 10,0 15,2 27,2 27,0 108,9 135,11 30,2 148,15 180,22 7,1 19,4 27,4l0 -221z"></path></svg>'); 
background-size:100% 160px;
transition: 2s all;
	
}

#header h2 {
	font-family: 'Great Vibes';
	line-height:0.84;
		font-size: 3.8vmax;
    color: #eb6020;

    text-shadow:  1px  1px 1px white,
                  1px -1px 1px white,
                 -1px  1px 1px white,
                 -1px -1px 1px white;
	font-weight: normal;
	transition: 0.5s all;

	}
	
#header h3 {
	font-family: 'Baloo Thambi Two';
	font-size:1.6vmax;
	    color: #eb6020;
margin-left:20px;
    text-shadow:  1px  1px 1px black,
                  1px -1px 1px black,
                 -1px  1px 1px black,
                 -1px -1px 1px black;
	font-weight: normal;
	transition: 0.5s all;
}


#header.small
{
	top:-200px;



}

	#header.small.navshow 
	{
	top: 70px;
position:fixed;
	}
	
	#header.small.navshow.oflow
	{
	top:0px;

	}









	#header a
	{
	color: #fff;
	text-decoration: none;
	}
	#header a:hover
	{
	color: #fff;
	text-decoration: none;
	}
	#headerspacer
	{
	height:150px;
	}
	

	
#content
{

}
	#incontent
	{
	margin: 0 auto;  
	padding: 10px;
	width:100%;
 	max-width: 1600px;
overflow:hidden;
	}

	 


	 



#tipp {
	background: #ddf0d2; 
	text-align:center;
	text-valign:bottom;
	margin:0 auto;
	display:flex;
	align-items : flex-end;
	justify-content : center;
}


.intipp {
	text-align:center;
	text-valign:top;
	margin:0 auto;
	display:flex;
	flex-direction: column;
	align-items : center;
	justify-content: space-around;
	color:#000;
}

.intipp p {color:#000;}


.intipp a {  text-decoration: none;
  color: #000;
  font-weight: 400;
    position: relative;
  display: inline-block;
  }





.intipp a:after {
  content:'';
  position: absolute;
  border-bottom: 2px solid #ffff00;
  top: 90%;
  transition: all 0.4s;
 }

.intipp a:after {
  left: 50%;
  right: 50%;
  color:#ffff00;
}
.intipp a:hover:after {
  right: 0; left: 0; text-decoration: underline;
  color:#fff;
}






#footer
{



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

	}
	#footer a
	{
	color: #fff;
	text-decoration: none;
	}
	#footer a:hover
	{
	color: #d8eab2;
	text-decoration: underline;
	}
	
.weartikelbox {
background:#ece3d6;
border-radius:12px;
padding:10px;
color:#222;
display:inline-block;
max-width:400px;
float:right;
border:solid 1px #555;
transition:1s all;
}

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

}

.weartikelbox ul {margin-left:30px;}
	.weartikelbox:hover { opacity:0.7; transition:1s all; border:solid 1px #6c1a1c; }
	
#toplink
{
position: fixed;
bottom:30px;
right: -50px;
background: #ccc;
border-radius: 20px;
opacity: 0;
display: inline-block;
z-index:1000;
width: 40px;
height: 40px;
padding:5px;
  display: flex; 
  align-items: center;
  justify-content: center; 
border: solid 1px black;


overflow: hidden;
text-align: center;

transition: 0.3s all;
pointer-events: none;
cursor: pointer;
}
#toplink:hover
{
opacity: 0;
background: #fff;
transition: 0.3s all;
border:1px #000 solid;
}
#toplink.seh
{
opacity: 1;
right:20px;
pointer-events: all;
transition:all 1.3s;
}
#toplink.seh:hover
{
transform: translate(0px, -10px) scale(1.2,1.2); transition: all 1s;
}


.wrapper {
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 0px;
  width:100%;
}



.box {
		display: flex;
	flex-direction: column;
	justify-content: center;
		align-items: center;
		background:#fceaa0;
		text-align: left;
		padding:20px; margin:5px;
		border: solid 1px #eb6020;
		
}


.boxohne {
	
			display: flex;
	flex-direction: column;
	justify-content: center;
		align-items: center;
		background:#eee;
		text-align: left;
		padding:0px; margin:5px;
		border: solid 1px #eb6020;
}

@media screen and (max-width: 890px) {
	.wrapper{grid-template-columns: 100%;}
	.box {padding:10px;}
}








input[type="button"]
{
margin: 4px 0;
width:150px;
display: inline-block;
padding: 5px 10px;
border: 1px solid #1B334B;
background: #999;
color: #000;
font-size: 16px; 
border-radius: 4px;
cursor: pointer;
transition: 0.5s all;
}
input[type="button"]:hover
{
background: #245687;
transition: 0.5s all;
color:#fff;
}