#wrapper {
	height:auto;
}
.coronahinweis {
	border-radius: 5px;
	border:2px solid #f29400;
	color:#f29400;
	font-weight: 400;
	margin-bottom: 30px;
	margin-top:30px;
	padding:6px;

}

body {
	font-size:15px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight:100;
	line-height:135%;
	color:#666666;
}
#mobile_menu {
	display:none;
	height:0;
	width:0;
	visibility: hidden;
}
a {
	text-decoration: none;
	color:#666666;
}
a:hover {
	color:#f29400;
}
html, body {
	margin : 0;
	height : 100%;
	width : 100%;
}
h1 {
	margin-top:0px;
	font-weight:400;
}
h2 {
	color: #f29400;
	margin-top:30px;
	padding-bottom:0;
	font-weight:300;
	font-size:16px;
	text-transform: uppercase;
	margin-bottom:0;
}

header {
	margin-top:20px;
	width:100%;
	display: -ms-grid;
	display: grid;
	-ms-display: grid;
    grid-template-columns: 1fr 200px 850px 1fr;
    -ms-grid-columns: 1fr 200px 850px 1fr;
}

section.main {
	display: -ms-grid;
	display: grid;
	-ms-display: grid;
	grid-template-columns: 1fr 1050px 1fr;
	-ms-grid-columns: 1fr 1050px 1fr;
	height:570px;
	margin-bottom:30px;
}
footer {
	display: -ms-grid;
	display: grid;
	-ms-display: grid;
	grid-template-columns: 1fr 1050px 1fr;
	-ms-grid-columns: 1fr 1050px 1fr;
}
.datenschutz {
	grid-column: 2;
	-ms-grid-column: 2;
	grid-row: 1;
	-ms-grid-row: 1;
	display: flex;
	justify-content: flex-end;
	justify-items: flex-end;
	justify-self: flex-end;
	align-content: flex-start;
	align-items: flex-start;
	align-self: flex-start;
	-ms-grid-row-align: start;
	-ms-grid-column-align: end;
}

.logo {
	grid-column: 2;
	-ms-grid-column: 2;
	grid-row: 1;
	-ms-grid-row: 1;
	/* align-self: center; */
	align-self: flex-end;
	-ms-grid-row-align: end;
	
}
img.me_logo {
	width:200px;
	margin:20px 0 0 20px;
	align-self: flex-end;
	-ms-grid-row-align: end;
	
}

p {
	padding: 0;
	margin:3px 0 10px 0;
	color:#000;
}

#home .container {
	/* background-image: url('../img/backgroundhome.jpg'); */
	background-image: url('../img/background_basic.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
	width:100%;
}
#leistungen .container {
	background-image: url('../img/kopfmassage.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
	width:100%;
}
#makeup .container,
#brautmakeup .container,
#fotomakeup .container,
#style .container {
	background-image: url('../img/makeup.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
	width:100%;
}
#tanz .container {
	/* background-image: url('../img/tanz.jpg'); */
	background-image: url('../img/makeup.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
	width:100%;
}
#kontakt .container {
	background-image: url('../img/schminken.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
	width:100%;
}
#coaching .container {
	background-image: url('../img/background_basic.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
	width:100%;
}
#bridal .container {
	background-image: url('../img/background_basic.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
	width:100%;
}
#links .container {
	background-image: url('../img/background_basic.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
	width:100%;
}

.container {
	grid-column: 2;
	-ms-grid-column: 2;
	grid-row: 1;
	-ms-grid-row: 1;
	align-self: top;
	-ms-grid-row-align:top;
	margin-top:40px;
	text-align: center;
}

ul#navi {
	grid-column:3;
	-ms-grid-column:3;
	grid-row:1;
	-ms-grid-row:1;
	justify-self: flex-end;
	align-self: flex-end;
	-ms-grid-row-align:end;
	-ms-grid-column-align:end;
	margin-bottom: 0;
}

ul#navi li {
	display: inline-block;
	margin:0 0 0 40px;
}

	
  ul#navi li {
	display:inline-block;
	padding: 6px 0 4px 0;
	height:22px;
	list-style-type: none;
	margin-left:0;
  }
  
  ul#navi a:hover,
  ul#navi ul a:hover {
	text-decoration:none;
  }
  
  ul#navi a:active,
  ul#navi ul a:active {
	text-decoration:none;
  }
  
  ul#navi li a {
	display: block;
	padding: 4px 8px;
	border-right: none;
	text-decoration:none;
  }
  
  ul#navi li:first-child a {
	display: block;
	padding-left:0;
	border-right: none;
	text-decoration:none;
  }
  ul#navi li ul li:first-child a {
	  padding-left:4px;
  }
  
  ul#navi li ul li a {
	display: block;
	padding: 4px 8px 4px 4px;
	border-right: none;
	text-decoration:none;
  }
  
  ul#navi li:last-child a {
	border-right: none;
	text-decoration:none;
  }
  
  ul#navi li.hover,
  ul#navi li:hover {
	position: relative;
  }
  
  ul#navi li.hover a {
	text-decoration:none;
  }
  
  /** Level 2 **/
  
  ul#navi li ul {
	width: auto;
	white-space:nowrap;
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 5px;
	padding:0px;
	margin-left:0px;
	z-index:777777;
  }
  
  ul#navi li ul li {
	z-index:999999;
	padding: 4px 10px 4px 0px;
	float: none;
	display: block;
	background:#fff;
  }
  
  ul#navi ul li a {
	border-right: none;
	width: 100%;
	margin:0px;
	padding:0;
	display: inline-block;
	text-decoration:none;
  }
  
  /** Level 3 **/
  
  ul#navi ul ul {
	left: 100%;
	top: 0;
  }
  
  ul#navi li:hover > ul {
	visibility: visible;
  }
  
.boxgrid{
	width: 1050px;
	height: 530px;
	background:#161613;
	overflow: hidden;
	position: relative;
}
.boxgrid img{
	position: absolute;
	border: 0;
}
.boxcaption{
	position: absolute;
	background-color:#fff;
	grid-column: 2;
	-ms-grid-column: 2;
	grid-row: 1;
	-ms-grid-row: 1;
	height: 420px;
	width: 100%;
	opacity: 0.7;
		/* For IE 5-7 */
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
		/* For IE 8 */
		-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
 }
 #leistungen .boxcaption,
 #home .boxcaption,
 #kontakt .boxcaption,
 #coaching .boxcaption {
	 overflow: scroll;
	 
 }
 .caption .boxcaption {
	top: 89%;
	left: 55px;
	width:850px;
	padding: 2vw 3vw 3vw;
}
span {
	color: #f29400;
}

img.dmk-logo {
	height:auto;
	width:120px;
	position: absolute;
	right:20px;
	top:20px;
}
img.dmk-link {
	position: relative;
	height:auto;
	width:150px;
	top:40px;
	align-self: center;
	justify-self: center;
	-ms-grid-column-align:center;
	-ms-grid-row-align:center;
}


/** ADM **/
img.edit_icon {
	height:15px;
}
p.adm-status {
	color:#f29400;
	font-weight:300;
}
input, textarea {
	border: 1px solid #c7c7c7;
	padding:5px;
	width:30vw;
	border-radius: 7px;
	font-family: Arial, Helvetica, sans-serif;
	color:#6c6c6c;
	font-size: 14px;
}
select, option {
	font-family: Arial, Helvetica, sans-serif;
	color:#6c6c6c;
	font-size: 14px;
	padding:5px;
	width:31vw;
}
label {
	font-size: 16px;
	color: #f29400;
}
label span {
	font-weight:200;
	font-size: 14px;
	color:#6c6c6c;
}
input {
	text-indent: 5px;
}
textarea {
	min-height:150px;
}

button, input.button {
	padding:5px;
	width:15vw;
	font-size: 14px;
	border-radius: 7px;
	border: 1px solid #c7c7c7;
}
input.button {
	color:#000;
	border-radius: 7px;
	border: 1px solid #c7c7c7;
	background: #f3ae3f;
}
button {
	color:#5a5a5a;
	border-radius: 7px;
	border: 1px solid #c7c7c7;
	background: #e9e9e9;
}

input[type=submit] {
	width:31vw;
	padding:10px;
	margin-top:20px;
}

input.delete {
	background: #ffc2b3;
	color:#000;
	margin-top:40px;
}


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

	footer {
		margin-top:170px;
		grid-template-columns: 1fr 800px 1fr;
		-ms-grid-columns: 1fr 800px 1fr;
	}
	section.main {
		display: -ms-grid;
		display: grid;
		-ms-display: grid;
		grid-template-columns: 1fr 800px 1fr;
		-ms-grid-columns: 1fr 800px 1fr;
		height: 700px;
		margin-bottom: 30px;
	}
	header {
		margin-top: 10px;
		width: 100%;
		display: -ms-grid;
		display: grid;
		-ms-display: grid;
		grid-template-columns: 1fr 150px 650px 1fr;
		-ms-grid-columns: 1fr 150px 650px 1fr;
	}

	ul#navi li a {
		font-size: 12px;
		padding-left:0;
		padding-right: 8px;
	}
	.boxgrid{
		height: 405px;
	}
	.caption .boxcaption {
		width:630px;
	}

	#home .boxcaption,
	#leistungen .boxcaption,
	#coaching .boxcaption,
	#bridal .boxcaption,
	#makeup .boxcaption,
	#tanz .boxcaption,
	#brautmakeup .boxcaption,
	#fotomakeup .boxcaption,
	#style .boxcaption,
	#kontakt .boxcaption {
		overflow: scroll;
		
	}
	#home section.main,
	#home .caption .boxcaption,
	#leistungen section.main,
	#leistungen .caption .boxcaption,
	#coaching section.main,
	#coaching .caption .boxcaption,
	#bridal section.main,
	#bridal .caption .boxcaption,
	#makeup section.main,
	#makeup .caption .boxcaption,
	#tanz section.main,
	#tanz .caption .boxcaption,
	#brautmakeup section.main,
	#brautmakeup .caption .boxcaption,
	#fotomakeup section.main,
	#fotomakeup .caption .boxcaption,
	#style section.main,
	#style .caption .boxcaption,
	#kontakt section.main,
	#kontakt .caption .boxcaption {
		height:320px;
	}
}


@media screen and (max-width: 800px) {
	section.main {
		display: -ms-grid;
		display: grid;
		-ms-display: grid;
		grid-template-columns: 1fr 600px 1fr;
		-ms-grid-columns: 1fr 600px 1fr;
		height: 700px;
		margin-bottom: 30px;
	}
	header {
		margin-top: 10px;
		width: 100%;
		display: -ms-grid;
		display: grid;
		-ms-display: grid;
		grid-template-columns: 1fr 600px 1fr;
		-ms-grid-columns: 1fr 600px 1fr;
	}
	footer {
		margin-top:150px;
		grid-template-columns: 1fr 600px 1fr;
		-ms-grid-columns: 1fr 600px 1fr;
	}
	ul#navi {
		grid-column:2;
		-ms-grid-column:2;
		grid-row: 2;
		-ms-grid-row:2;
		justify-self:flex-end;
		align-self: flex-end;
		-ms-grid-row-align: end;
		-ms-grid-column-align: end;
		margin-bottom: 0;
		margin-left: 0;
		padding-left: 0;
	}
	ul#navi li a {
		font-size: 12px;
		padding-left:0;
		padding-right: 8px;
	}
	.boxgrid{
		height: 510px;
	}
	.caption .boxcaption {
		width:430px;
	}

	#home .boxcaption,
	#leistungen .boxcaption,
	#coaching .boxcaption,
	#bridal .boxcaption,
	#makeup .boxcaption,
	#tanz .boxcaption,
	#brautmakeup .boxcaption,
	#fotomakeup .boxcaption,
	#style .boxcaption,
	#kontakt .boxcaption {
		overflow: scroll;
		
	}
	#home section.main,
	#home .caption .boxcaption,
	#leistungen section.main,
	#leistungen .caption .boxcaption,
	#coaching section.main,
	#coaching .caption .boxcaption,
	#bridal section.main,
	#bridal .caption .boxcaption,
	#makeup section.main,
	#makeup .caption .boxcaption,
	#tanz section.main,
	#tanz .caption .boxcaption,
	#brautmakeup section.main,
	#brautmakeup .caption .boxcaption,
	#fotomakeup section.main,
	#fotomakeup .caption .boxcaption,
	#style section.main,
	#style .caption .boxcaption,
	#kontakt section.main,
	#kontakt .caption .boxcaption {
		height:450px;
	}
	#home .container, 
	#coaching .container, 
	#bridal .container {
		background-image: url('../img/m_background_basic.jpg');
		background-repeat: repeat-y;
	}
	#leistungen .container {
		background-repeat: repeat-y;
		background-image: url('../img/m_kopfmassage.jpg');
	}
	#makeup .container,
	#brautmakeup .container,
	#fotomakeup .container,
	#style .container {
		background-repeat: repeat-y;
		background-image: url('../img/m_makeup.jpg');
	}
	#tanz .container {
		background-repeat: repeat-y;
		background-image: url('../img/m_tanz.jpg');
	}
	#kontakt .container {
		background-repeat: repeat-y;
		background-image: url('../img/m_schminken.jpg');
	}
}


@media screen and (max-width: 600px) {
	body {
		font-size: 1.1em;
	}
	header {
		margin-top:10px;
		width:100%;
		display: -ms-grid;
		display: grid;
		-ms-display: grid;
		grid-template-columns: 4fr;
		-ms-grid-columns: 4fr;
	}
	footer {
		grid-template-columns: 1fr;
		-ms-grid-columns: 1fr;
		margin-top:10px;
	}
	.datenschutz {
		grid-column: 1;
		-ms-grid-column: 1;
	}
	/**
		GREEN BG f7f7ff // CO bcd370
	**/
	#mobile_menu {
		display:block;
		visibility: visible;
		height:42px;
		width:50px;
		background-color: #fcfaf1;
		border:1px solid #fcb54b;
		border-radius:9px;
		grid-row:1;
		-ms-grid-row:1;
		align-self: flex-end;
		-ms-grid-row-align: end;
		justify-self: flex-end;
		-ms-grid-column-align: end;
		margin-right:20px;
		margin-bottom: 2px;
		grid-column: 1;
		-ms-grid-column: 1;
	}
	#mobile_menu .hr {
		border-top:3px solid #fcb54b;
		height:0px;
		margin:8px;
		border-radius: 20px;
	}
	.logo {
		grid-column: 1;
		grid-row:1;
		-ms-grid-column: 1;
		-ms-grid-row:1;
		justify-self: flex-start;
		align-self: flex-end;
		-ms-grid-row-align: end;
		-ms-grid-column-align: start;
	}
	img.me_logo {
		width:200px;
		margin:0px 20px 0px;	
	}
	ul#navi {
		grid-column: 1;
		-ms-grid-column: 1;
		grid-row:3;
		-ms-grid-row:3;
		justify-content: flex-end;
		-ms-grid-column-align: end;
		text-align: right;
		margin-right: 20px;
	}

	ul#navi li {
		display: block;
	}
	ul#navi li a {
		font-size: 1em;
	}
	ul#navi li ul {
		position: relative;
		left:0;
		top:0;
		text-align: right;
	}
	
	section.main {
		height:900px;
		grid-template-columns: 1fr;
		-ms-grid-columns: 1fr;
		margin-bottom:0;
		padding-bottom:0;
		/* color:rgb(59, 59, 59); */
	}

	span {
		opacity: 1;
		font-weight: 500;
	}

	#home section.main,
	#home .caption .boxcaption {
		height:1100px;
	}
	#leistungen section.main,
	#leistungen .caption .boxcaption {
		height:1750px;
	}
	#coaching section.main,
	#coaching .caption .boxcaption {
		height:550px;
	}
	#bridal section.main,
	#bridal .caption .boxcaption {
		height:550px;
	}
	#makeup section.main,
	#makeup .caption .boxcaption {
		height:500px;
	}
	#tanz section.main,
	#tanz .caption .boxcaption {
		height:750px;
	}
	#brautmakeup section.main,
	#brautmakeup .caption .boxcaption {
		height:530px;
	}
	#fotomakeup section.main,
	#fotomakeup .caption .boxcaption {
		height:550px;
	}
	#style section.main,
	#style .caption .boxcaption {
		height:480px;
	}
	#kontakt section.main,
	#kontakt .caption .boxcaption {
		height:600px;
	}

	.boxgrid{
		grid-column:1;
		-ms-grid-column:1;
		grid-row:1;
		-ms-grid-row:1;
		width: 90vw;
		height: auto;
		background:#fff;
		overflow: hidden;
		position: relative;
	}
	.boxgrid img{
		position: relative;
		border: 0;
	}
	
	.dmk-logo {
		display:none;
		visibility: hidden;
	}
	
	 #leistungen .boxcaption,
	 #kontakt .boxcaption {
		 overflow: scroll;	 
	 }
	 .caption .boxcaption {
		top:0px;
		left: 0vw;
		width:94vw;
		height:auto;
		margin-bottom: 0;
		padding: 3vw;
		opacity: 0.8;
	}

	
}