/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* +------------------------------------------------------------------------+ */
/* | DEFAULTS																| */
/* +------------------------------------------------------------------------+ */

html, body { height: 100%; }

body {
	/* Nur Ligaturen aktivieren, bedingte Ligaturen bleiben inaktiv */
	font-feature-settings:"liga", "dlig" 0;
	text-rendering: optimizeLegibility;

	/* Silbentrennung aktivieren */
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-epub-hypens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

h1, h2, h3, h4, h5, h6, p, ul, li, a {
	color: #8f8f8f;
	font-family: 'Indie Flower';
	font-weight: 400;
}

a, a:focus, a:hover, a:visited {
	text-decoration: none;
}
a:focus, a:hover {
	color: #009ee3;
}

div {
	box-sizing: border-box;
}

hr { border: none; background-color:#acacac; height: 1px; }

strong {
	font-weight: 500;
}

.desktop-br { display: block; }

/* +------------------------------------------------------------------------+ */
/* | LAYOUT																	| */
/* +------------------------------------------------------------------------+ */

.grid-container {
	display: grid;
	grid-template-areas:
		'header header header header header header'
		'main main main main main main'
		'footer footer footer footer footer footer ';
	/*grid-gap: 10px;*/
	height: 100%;
}

	.grid-container > div {
		text-align: center;
	}
	
	.header { grid-area: header; height: 100px; }
	.content{ grid-area: main; height: 100%; margin: 0 auto; }
	.footer { grid-area: footer; align-self: end; }


.flex-container {
	display					: -ms-flexbox;
	display					: -webkit-flex;
	display					: flex;

	-webkit-flex-direction	: row;
	-ms-flex-direction		: row;
	flex-direction:			: row;

	-webkit-flex-wrap		: wrap;
	-ms-flex-wrap			: wrap;
	flex-wrap				: wrap;

	-webkit-justify-content	: space-between;
	-ms-flex-pack			: justify;
	justify-content			: space-between;

	-webkit-align-content	: stretch;
	-ms-flex-line-pack		: stretch;
	align-content			: stretch;

	-webkit-align-items		: flex-start;
	-ms-flex-align			: start;
	align-items				: flex-start;
}
.flex-container > div {
	-webkit-flex		: 1 1 auto;
	-ms-flex			: 1 1 auto;
	flex				: 1 1 auto;

	font-family	: 'Indie Flower';
	font-size	: 0.8em;
	padding		: 20px 20px;
}
.flex-container .left {
	-webkit-align-self	: center;
	-ms-flex-item-align	: center;
	align-self			: center;

	text-align: left;
}
.flex-container .right {
	-webkit-align-self	: center;
	-ms-flex-item-align	: center;
	align-self			: center;

	text-align: right;
}


/* +------------------------------------------------------------------------+ */
/* | MAIN-DESIGN															| */
/* +------------------------------------------------------------------------+ */
html {
	background-color: rgb(22, 22, 22);
	/* background-image: url('/images/maintenance_bg.jpg');*/
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
/* +------------------------------------------------------------------------+ */
/* | HEADER																	| */
/* +------------------------------------------------------------------------+ */
.header { border-bottom:1px solid #777; background-image: url('/images/logo-eileen-mueller.png'); background-position: 100px 20px; background-repeat: no-repeat; background-size: auto 50px; padding: 20px 20px; }
	.header ul { padding: 25px 100px 25px 100px; text-align: right; }
		.header li { display: inline-block; }
			.header a { color: #8f8f8f; font-size: 13px; text-decoration: none; margin-left: 30px; }

/* +------------------------------------------------------------------------+ */
/* | CONTENT																| */
/* +------------------------------------------------------------------------+ */
.content { background-color: rgba(255,0,0,0.0); align-self: center; justify-self: center; padding: 100px; width: 100%; }
	.content h1 { font-size: 100px; font-weight: 100; line-height: 97px; }
	.content h2 { color: #8f8f8f; font-size: 20px; font-weight: 100; line-height: 40px; text-align: center; text-transform: uppercase; letter-spacing: 1.1px; padding: 30px 0px 0px 0px; margin-bottom: 0px; }
	.content .desktop-h2-br { display: block; }

	.content i { font-size: 83px; font-weight: 400; color: #009ee3; }
	.content h3 { font-size: 25px; font-weight: 400; line-height: 30px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; }
	.content p { font-size: 16px; font-weight: 300; line-height: 26px; }

	.content .icon { width: 95px; height: 95px; }


/* +------------------------------------------------------------------------+ */
/* | FOOTER																	| */
/* +------------------------------------------------------------------------+ */
.footer { border-top:1px solid #777; color: #8f8f8f; width:100%; }


/* +------------------------------------------------------------------------+ */
/* | CONTENT DATENSCHUTZ													| */
/* +------------------------------------------------------------------------+ */
.content.dataprivacy { width: 1170px; }
	.content.dataprivacy h1 { font-size: 48px; text-align: left; margin-bottom: 30px; }
	.content.dataprivacy h2 { font-size: 28px; text-align: left; margin-top: 30px; margin-bottom: 10px;}
	.content.dataprivacy h3 { font-size: 18px; text-align: left; margin-top: 30px; margin-bottom: 10px;}
	.content.dataprivacy  p { text-align: left; }


/* +------------------------------------------------------------------------+ */
/* | CONTENT IMPRESSUM														| */
/* +------------------------------------------------------------------------+ */
.content.imprint { width: 1170px; }
	.content.imprint h1 { font-size: 48px; text-align: left; margin-bottom: 30px; }
	.content.imprint .text { }
	.content.imprint  h2 { font-size: 28px; text-align: left; margin-top: 30px; margin-bottom: 10px;}
	.content.imprint  p { text-align: left; }




/* +------------------------------------------------------------------------+ */
/* | MEDIA-QUERYS DESKTOP													| */
/* +------------------------------------------------------------------------+ */
@media screen 
  and (min-width: 400px) 
  and (max-width: 602px) {

	/* CONTENT */
	.content { padding: 50px 25px 25px 25px; }
	.content h1 { font-size: 44px; line-height: 44px; }
	.content h2 { font-size: 13px; line-height: 26px; text-align: center; text-transform: none; padding: 10px; margin: 20px auto 40px auto; max-width: 350px; }
	.content .desktop-h2-br { display: inline; }
	.content .icon { width: 34px; height: 34px; margin-bottom: 5px; }
	.content h3 { font-size: 20px; margin-bottom: 10px; }
	.content p { font-size: 13px; line-height: 20px; }
}

@media screen 
  and (min-width: 602px) 
  and (max-width: 663px) {

	/* CONTENT */
	.content { padding: 50px 25px 25px 25px; }
	.content h1 { font-size: 70px; line-height: 70px; }
	.content h2 { font-size: 20px; line-height: 40px; text-align: center; text-transform: none; padding: 10px; margin: 20px auto 40px auto; max-width: 530px; }
	.content .desktop-h2-br { display: inline; }
	.content .icon { width: 55px; height: 55px; margin-bottom: 10px; }

}

@media screen 
  and (min-width: 664px)
  and (max-width: 1017px) {

	/* CONTENT */
	.content { padding: 50px 25px 25px 25px; }
	.content h1 { font-size: 70px; line-height: 70px; }
	.content h2 { font-size: 20px; line-height: 40px; text-align: center; text-transform: none; padding: 10px; margin: 20px auto 40px auto; max-width: 530px; }
	.content .desktop-h2-br { display: inline; }
	.content .icon { width: 55px; height: 55px; margin-bottom: 10px; }

}

@media screen 
  and (min-width:1018px) {

	/* CONTENT */

  }