*{
	padding: 0;
	margin: 0;
}
html, body{
	height: 100%;
	scroll-behavior: smooth;
}
p, a, span, h1, h2{
	/*font-family: 'Arial', cursive;*/

	font-family: 'Noto Sans SC', sans-serif;
}
a{
	text-decoration: none;
	color: white;
}
::-moz-selection {
  color: white;
  background: #ddbac1;
}

::selection {
  color: white;
  background: #ddbac1;
}
/* mainwrapper */
.mainwrapper{
	width: 100%;
	height: 100%;
	padding-bottom: 10%;
}
#name{
	position: absolute;
	width: 40%;
	height: 80%;
	top: 10%;
	left: 10%;

	/*background-image: url(img/backtwo.png);*/
	background-image: url(img/background_thick.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
#about{
	position: absolute;
	width: 40%;
	height: 50%;
	top: 50%;
	right: 10%;

	color: #ddbac1;
}
.main_button{
	text-align: center;
}
#kontakt_button{
	position: absolute;
	padding: 3px 20px;
	margin: 20px 0;
	font-size: 1.3em;
	border: 2px solid #ddbac1;
	border-radius: 40px 40px 3px 40px;
	cursor: pointer;
	text-transform: uppercase;
	box-shadow: 0px 0px 6px 2px #E0E0E0FF;
	background-color: #ddbac1;
	color: white;

	-webkid-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
#kontakt_button:hover{
	background-color: #ddbac1;
	padding: 5px 23px;
	margin-left: -2px;
	margin-top: 17.5px;
	color: white;
	box-shadow: 0px 0px 10px 5px #E0E0E0FF;
}

.secondwrapper{
	background-color: #ddbac1;
	width: 90%;
	margin-left: 5%;
	color: white;
	border-radius: 5px;
	box-shadow: 0px 0px 6px 2px #E0E0E0FF;
}
.secondwrapper span{
	font-size: 1.2em;
}
.secondwrapper i{
	opacity: 0.7;
}
.kreativprogram{
	display: inline-block;
	width: 100%;
	height: 100%;
}
.k_inner{
	width: 40%;
	padding: 4em 0 0 4em;
	float: left;
}
.geburtstagfeiern{
	display: inline-block;
	width: 100%;
	height: 100%;
}
.g_inner{
	width: 40%;
	padding: 4em 0 0 4em;
	float: left;
}
.fadenzauber{
	display: inline-block;
	width: 100%;
	height: 100%;
}
.f_inner{
	width: 40%;
	padding: 4em 0 0 4em;
	float: left;
}
.dmschule{
	display: inline-block;
	width: 100%;
	height: 100%;
	padding-bottom: 3em;
}
.dm_inner{
	width: 40%;
	padding: 4em 0 0 4em;
	float: left;
}


.image_holder_k{
	width: 40%;
	float: right;
	padding: 4em 4em 0 0;
}
.image_holder_g{
	width: 40%;
	float: right;
	padding: 4em 4em 0 0;
}
.image_holder_f{
	width: 40%;
	float: right;
	padding: 4em 4em 0 0;
}
.image_holder_dm{
	width: 40%;
	float: right;
	padding: 4em 4em 0 0;
}

/* öffnungszeiten */

.oeffnungszeiten{
	width: 60%;
	padding: 20% 0 10% 0;
	margin-left: 20%;
	color: #ddbac1;
	display: inline-block;
}
.oeff_inner{
	width: calc(100% - 100px - 2em);
}
.oeffnungszeiten p{
	width: calc(100% - 100px - 2em);
	display: block;
	float: right;
}
.oeffnungszeiten img{
	height: 100px;
	margin: 0 2em 2em 0;
	float: left;
}
.oeffnungszeiten span{
	font-size: 1.2em;
	font-weight: 700;
}

/* termine */

.termine{
	width: 60%;
	padding: 0 0 10% 0;
	margin-left: 20%;
	color: #ddbac1;
	display: inline-block;
}
.termine p{
	width: calc(100% - 100px - 2em);
	display: block;
	float: right;
}
.termine img{
	height: 100px;
	margin: 0 2em 2em 0;
	float: left;
}
.termine span{
	font-size: 1.2em;
	font-weight: 700;
}


/* gallery */

.gallery_b{
	width: 60%;
	padding: 0 0 20% 0;
	margin-left: 20%;
	color: #ddbac1;
	display: block;
}
#gallery_button{
	text-align: center;
	padding: 1em 5em;
	border: 1px solid #ddbac1;
	border-radius: 5px;
	cursor: pointer;

	-webkid-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
.gallery_b span:hover{
	background-color: #ddbac1;
	color: white;
}
/*fooot wrapper */
.foot_wrapper{
	width: 100%;
	height: 20%;
	background-color: #ddbac1;
	font-size: .8em;
	box-shadow: 0px 0px 6px 2px #E0E0E0FF;
}
#foot_fa{
	color: white;
	margin: 3em 0 0 10%;
	float: left;
}
#foot_in{
	color: white;
	margin: 3em 1em;
	float: left;
}
#foot_con{
	color: white;
	margin: 3em 0;
	padding: 0 1em;
	float: right;
	border-right: 1px solid white;
	border-left: 1px solid white;
}
#foot_co{
	color: white;
	margin: 3em 5% 0 0;
	padding: 0 1em;
	float: right;
}
#foot_im{
	color: white;
	margin: 3em 0 0 0;
	padding: 0 1em;
	float: right;

	-webkid-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
#foot_im:hover{
	opacity: 0.6;
}
#foot_st{
	color: white;
	margin: 3em 10% 0 0;
	padding: 5px 15px;
	float: right;
	border: 1px solid white;
	border-radius: 5px;
	cursor: pointer;

	-webkid-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
#foot_st:hover{
	opacity: 0.6;
}

/* kontakt */
.kontakt{
	position: absolute;
	background-color: #ddbac1;
	width: 100%;
	height: 150%;
	top: -150%;

	-webkid-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
#k_w{
	width: 50%;
	margin-left: 35%;
	padding-top: 5%;
}
#img_self{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: #ddbac1;
	float: left;
	margin-left: 5em;

	-webkit-box-shadow:inset 0px 0px 0px 10px #EFEFEFFF;
    -moz-box-shadow:inset 0px 0px 0px 10px #EFEFEFFF;
    box-shadow:inset 0px 0px 0px 10px #EFEFEFFF;

    /*background-image: url(img/woman_bsp.jpeg);*/
    background-size: cover;
    background-position: center;
}
#k_n{
	float: left;
	color: white;
}
#ko_close{
	margin: 3%;
	float: right;
	color: white;
	cursor: pointer;
}
#map{
	width: 100%;
	height: 50%;
	position: absolute;
	top: 50%;
	-webkit-filter: grayscale(0%);
 	filter: grayscale(0%);
}

/* impressum */

#im_body{
	background-color: #ddbac1;
}
.im_wrapper{
	width: 30%;
	padding: 10% 0;
	margin: 0 35%;
	color: white;
}

/* galsl */

.galsl{
	position: fixed;
	top: 0;
	width: 100%;
	height: 0;
	background-color: #ddbac1;

	-webkid-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
#do{
	display: none;
}
@media only screen and (max-width: 1600px){

}
@media only screen and (max-width: 1300px){
	
}

@media only screen and (max-width: 1200px){

	#about{
		position: absolute;
		width: 35%;
		height: 50%;
		top: 20%;
		right: 10%;

		color: #ddbac1;
	}
}
@media only screen and (max-width: 800px){ /*mobile*/
	.mainwrapper{
		width: 100%;
		height: 100%;
		padding-bottom: 140%;
	}
	#name{
		position: absolute;
		width: 90%;
		height: 80%;
		top: 10%;
		left: 5%;

		/*background-image: url(img/backtwo.png);*/
		background-image: url(img/background_thick.png);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}
	#about{
		position: absolute;
		width: 90%;
		height: 50%;
		top: 100%;
		right: 5%;
		font-size: 0.9em;

		color: #ddbac1;
	}
	.main_button{
		padding: 3em 0;
		width: 100%;
		text-align: center;
	}
	#kontakt_button{
		border: 1px solid #ddbac1;
		border-radius: 5px;
		cursor: pointer;
		padding: 0.5em 0;
		margin: 0;
		background-color: #fff;
		color: #ddbac1;
		box-shadow: none;
		position: static;
	}


	.kreativprogram, .geburtstagfeiern, .fadenzauber, .dmschule{
		display: inline-block;
		width: 100%;
		height: 100%;
	}
	.k_inner, .g_inner, .f_inner, .dm_inner{
		width: calc(100% - 4em);
		padding: 2em 0 0 2em;
	}
	.image_holder_k, .image_holder_g, .image_holder_f, .image_holder_dm{
		width: calc(100% - 4em);
		padding: 2em 2em 0 0;
	}


	.oeffnungszeiten{
		width: 90%;
		padding: 20% 0 0 0;
		margin-left: 5%;
		color: #ddbac1;
		display: inline-block;
	}
	.oeff_inner{
		width: 100%;
	}
	.term_inner{
		width: 100%;
	}
	.oeffnungszeiten p{
		float: right;
		width: calc(100% - 30px - 2em);
	}
	.oeffnungszeiten img{
		height: 30px;
		float: left;
		margin: 0 2em 10em 0;
	}
	.oeffnungszeiten span{
		font-size: 1.2em;
		font-weight: 700;
	}

	/* termine */

	.termine{
		width: 90%;
		padding: 20% 0 40% 0;
		margin-left: 5%;
		color: #ddbac1;
		display: inline-block;
	}
	.termine img{
		height: 30px;
		float: left;
		margin: 0 2em 10em 0;
	}
	.termine span{
		font-size: 1.2em;
		font-weight: 700;
		/*
		text-decoration: underline;
		text-decoration-style: dashed;
		*/
	}
	.termine p{
		float: right;
		width: calc(100% - 30px - 2em);
	}

	.gallery_b{
		width: 100%;
		padding: 0 0 10% 0;
		margin-left: 0;
		color: #ddbac1;
		text-align: center;
	}
	#gallery_button{
		border: 1px solid #ddbac1;
		border-radius: 5px;
		cursor: pointer;

		-webkid-transition: all .3s;
		-moz-transition: all .3s;
		-o-transition: all .3s;
		transition: all .3s;
	}
	.gallery_b span:hover{
		background-color: #ddbac1;
		color: white;
	}


	.foot_wrapper{
		width: 100%;
		height: 80%;
		background-color: #ddbac1;
		font-size: .8em;
		box-shadow: 0px 0px 6px 2px #E0E0E0FF;
	}
	#foot_fa{
		color: white;
		margin: 3em 0 0 10%;
		float: left;
	}
	#foot_in{
		color: white;
		margin: 3em 1em;
		float: left;
	}

	#foot_co{
		width: 80%;
		color: white;
		margin: 3em 0 0 10%;
		padding: 0 1em;
		float: left;
	}
	#foot_con{
		width: 80%;
		color: white;
		margin: 3em 0 3em 10%;
		padding: 0 1em;
		float: left;
		border-right: none;
		border-left: none;
	}
	#foot_im{
		width: 80%;
		color: white;
		margin: 3em 0 0 10%;
		padding: 0 1em;
		float: left;

		-webkid-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;
		transition: all 1s;
	}
	#foot_im:hover{
		opacity: 0.6;
	}
	#foot_st{
		color: white;
		margin: 3em 10% 0 0;
		padding: 5px 15px;
		float: right;
		border: 1px solid white;
		border-radius: 5px;
		cursor: pointer;

		-webkid-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;
		transition: all 1s;
	}
	#foot_st:hover{
		opacity: 0.6;
	}

	.kontakt{
		position: absolute;
		background-color: #ddbac1;
		width: 100%;
		height: 150%;
		top: -150%;

		-webkid-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;
		transition: all 1s;
	}
	#k_w{
		width: 90%;
		margin-left: 5%;
		padding-top: 5%;
	}
	#img_self{
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-color: #ddbac1;
		float: left;
		margin-left: calc(50% - 50px);

		-webkit-box-shadow:inset 0px 0px 0px 5px #EFEFEFFF;
	    -moz-box-shadow:inset 0px 0px 0px 5px #EFEFEFFF;
	    box-shadow:inset 0px 0px 0px 5px #EFEFEFFF;

	    /*background-image: url(img/woman_bsp.jpeg);*/
	    background-size: cover;
	    background-position: center;
	}
	#k_n{
		float: left;
		color: white;
	}
	#ko_close{
		margin: 3%;
		float: right;
		color: white;
		cursor: pointer;
	}
	#map{
		width: 100%;
		height: 50%;
		position: absolute;
		top: 50%;
		-webkit-filter: grayscale(0%);
	 	filter: grayscale(0%);
	}
}