@charset "utf-8";
/*allgemeine styles*/
/*
farben:
	=> grau: d1d2d4
	=> schwarz: 231f20
	=> gold: ddc06a
	= >weiss: ffffff;
*/
body {
	background:#ffffff;
}
/*fonts
@font-face {
    font-family: CocogoosePro;
    src: url(../fonts/CocogoosePro.ttf);
}
@font-face {
    font-family: CocogooseProThin;
    src: url(../fonts/CocogooseProThin.ttf);
}
*/
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: lighter;
	font-style: normal;
	font-size:30px;
	margin:0px 0px 19px 0px;
}

h2 {
	font-size:16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 1.35em;
}

span.regular{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
}
span.light{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: ligher;
	font-style: normal;
}
p {
	line-height: 1.35em;
	margin:0px 0px 19px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size:14px;
}
a {
	text-decoration: none;
	color:#231f20;
}

div {
 box-sizing: border-box;
}

/*layout */
#debug {
	display:none;
	position:fixed;
	top:10px;
	left:10px;
	z-index:1001;
	background:#FF0;
	color:#333;
	padding:10px;
}

#page_container {
	margin: 0 auto;
	width: 850px;
}

div.header{
	width:100%;
}
div.content {
	width:100%;
	display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
	padding:0px 30px 0px 30px;
}
div.content h1,div.content h2, div.content p {
	width:100%;
}
div.footer{
	margin:50px 0px 0px 0px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

div.footer p{
	font-size:10px;
}
div.footer a{
	border-bottom:#ddc06a 1px solid;
}

div.footer a:hover{
	background:#ddc06a;
}


/*responsiveness */
.resp01 {}
.resp02 {display: none;}
.resp03 {}
.resp04 {display:none;}

@media screen and (max-width:880px) {
	#page_container {
	 width: 700px;
  }
}

@media screen and (max-width:720px) {
	#page_container {
	 width: 500px;
  }
	h1 {
		font-size:24px;
	}
	h2 {
		font-size: 16px; 
	}
	p {
		font-size:13px;
	}
	.resp01 {display: none;}
  .resp02 {display:inline;}
  .resp03 {}
  .resp04 {display:none;}
}

@media screen and (max-width:540px) {
	#page_container {
	 width: 350px;
  }
	h1 {
		font-size:22px;
	}
	h2 {
		font-size: 14px; 
	}
	p {
		font-size:12px;
	}
	div.footer p{
	 font-size:9px;
  }
	.resp01 {display:inline;}
  .resp02 {display:none;}
  .resp03 {display:none;}
  .resp04 {display:inline;}
}

@media screen and (max-width:370px) {
	#page_container {
	 width: 300px;
  }
	h1 {
		font-size:18px;
	}
	h2 {
		font-size: 12px; 
	}
	p {
		font-size:11px;
	}
	div.footer p{
	 font-size:8px;
  }
}