@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family: Mural Script;
	local: Mural Script;
	src: url(/font/MH______.woff) format('woff');
}

*{
	margin:0;
	padding:0;
}

html {
	height:100%;
	margin:0;
	padding:0;
}
body {
	height:100%;
	color: #4D4D4D;
	font-family:  'Open Sans',sans-serif;
	font-size:12px;
	line-height:18px;
	margin:0;
	padding:0;
	overflow-y: scroll;
	overflow-x: hidden;
}

h2 {
	font-weight: bold;
	font-size: 18px;
	padding-bottom: 20px;
	color: black;
}

button:hover,
input[type=submit]:hover {
	cursor: pointer
}

a,
a:link,
a:visited,
a:focus {
	text-decoration: none;
	outline: none;
	color: grey;
}

a:hover,
.active a {
	color: black;
}

img {
	border:0;
}

.centeralign {
	text-align: center;
	clear: both;
}

.list_row_1 {
	display: none;
}

.list_entry_titel {
	font-size: 20px;
}

.list_row_2 {
	padding-bottom: 10px;
}

h1.download {
	margin: 60px 20px 0 20px;
}

#list_content {
	margin: 20px 20px 60px 20px;
}

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

	/*------------------------------------------------------*/
	/* N A V I G A T I O N */
	/*------------------------------------------------------*/

	#navigation {
		height: auto;
	}

	#navigation ul {
		height: auto;
		float: right;
	}

	#navigation ul  li {
		list-style: none;
		list-style-image: none;
		height: 40px;
		float: left;
		color: black;
		padding-right: 30px;
	}

	#navigation a {
		font-size: 16px;
		line-height: 40px;
	}
	
	/*------------------------------------------------------*/
	/* C O N T E N T */
	/*------------------------------------------------------*/

	#wrapper {
		width: 100%;
		background: #FAF6F3;
	}
	
	#header {	
		height: 80px;
		background: url(../images/header-bg.jpg) -200px center;
	}

	#headerlogo img {
		float: left;
	}
	
	#headline {
		position: absolute;
		width: 100%;
	}

	#headline p {
		float: right;
		padding-right: 20px;
		color: black;
		font-size: 50px;
		line-height: 80px;	
		font-family: 'Mural Script';
	}

	.page-header {
		height: 80px;
		background-image: url(../images/page-header-bg.jpg);
		color: #C27A78;
		line-height: 80px;
		font-size: 18px;
		text-align: center;
	}

	.page-header.bottom {
		height: 142px;
		line-height: 30px;
		padding: 13px 10px 0 10px;
		font-size: 17px;
		background: #f0e6dd url(../images/page-header-bg-bottom-sm.png) center -25px;
	}

	.page_content {
		font-size: 16px;
		line-height: 22px;
		padding: 20px 0;
		color: #4D4D4D;
	}
	
	.centeralign img {
		width: 100%;
		max-height: 550px;
		max-width: 351px; 
	}

	.mich {
		margin: 0 auto;
		width: 250px;
		padding-bottom: 20px;
	}	
	
	.ueberMich {
		padding: 0 20px;
	}

	.makeup {
		float: left;
		padding-left: 60px;
		padding-right: 40px;
		
	}
	
	.left p {
		margin-left: 0;
	}
	
	.right p {
		margin-right: 0;
	}
	
	.smart {
		display: none;
	}

	.section {
		padding: 20px; 
		border-bottom: 1px solid black;
	}

	#section1 {
		padding-top: 0;
	}

	.section.last {
		padding-bottom: 0;
		border-bottom: 0;
	}
	
	.floatleft,
	.floatright	{
		padding-bottom: 20px;
	}
	
	/*------------------------------------------------------*/
	/* Kontakt Formular */
	/*------------------------------------------------------*/

	.danke {
		width: 300px;
		text-align: center;
		margin: 0 auto;
	}
	
	.kontaktForm,
	.kontaktMap {
		margin: 0 auto;
	}
	
	.kontaktForm {
		padding: 0 10px;
	}

	.kontaktMap {
		display: none;
	}
	
	.formTitle {
		font-size: 21px;
		padding-bottom: 20px;
		border-bottom: 1px solid #4D4D4D;
	}
	
	.formSubTitle {
		line-height: 27px;
		clear: both;
		padding-bottom: 10px;
		position: absolute;
	}
	
	.field {
		width: 100%;
		padding: 5px 0;
		border-bottom: 1px solid #4D4D4D;
		overflow: hidden;
	}
	
	.field label {
		display: inline-block;
		width: 120px;
		position: absolute;
		line-height: 27px
	}
	
	.field input {
		border: none;
		outline: none;
		height: 27px;
		font-size: 16px;
		background: #EEEEEE;
		padding-left: 5px;
		margin-left: 120px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.checkbox {
		width: 100%;
		float: left;
		padding-bottom: 10px;
	}
	
	.checkIntend {
		padding-left: 120px;
		padding-top: 10px;
	}
	
	.trenner {
		border-bottom: 1px solid #4D4D4D;
		padding-top: 10px;
	}
	
	.field textarea {
		border: none;
		outline: none;
		margin-left: 120px;
		padding-left: 5px;
		padding-top: 5px;
		background: #EEEEEE;
		font-size: 16px;
		height: 76px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.button {
		margin: 0 auto;
		text-align: center;
		padding-top: 15px;
	}
	
	#sendKontakt {
		background: #FFB052;
		padding: 3px 8px;
		border: 0;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		color: white;
		font-size: 16px;
	}
	
	/*------------------------------------------------------*/
	/* Footer */
	/*------------------------------------------------------*/

	#footer{
		background: #f0e6dd;
		font-size: 14px;
	}

	.subFooter {
		height: 25px;
	}

	.footer {
		width: 80%;
		float: right;
		position: relative;
		top: -20px;
		padding-bottom: 40px;
		padding-left: 20%
	}
	
	.footer.smart {
		display: none;
	}
	
	.footer.copy {
		padding-bottom: 20px;
	}

	.footerAid {
		height: 52px;
		background: #f0e6dd;
	}

	.impressum, .kontakt {
		font-weight: bold;
	}
	
	#login {
		-webkit-appearance: none;	
		background: #FFB052;
		padding: 3px 8px;
		border: 0;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		color: white;
	}

	#login_username {
		height: 22px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		border: 1px solid #8F8F8F;
		color: #4D4D4D;
		margin-bottom: 20px;
		padding-left: 22px;
		background: white url(../images/benutzer.png) 3px center no-repeat; 
	}

	#login_username-label,
	#login_password-label {
		display: none;
	}

	#login_password {
		height: 22px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		padding-left: 22px;
		border: 1px solid #8F8F8F;
		color: #4D4D4D;
		background: white url(../images/passwort.png) 3px center no-repeat;
	}
	
	.kundeInput input {
		height: 27px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		border: 2px solid #8F8F8F;
		color: #4D4D4D;
		padding-left: 30px;
		background: white url(../images/check.png) 3px center no-repeat;
	}

}

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

	.page-header.bottom {
		height: 134px;
		line-height: 30px;
		padding-top: 35px;
		font-size: 17px;
		background: #f0e6dd url(../images/page-header-bg-bottom-sm.png) center -10px;
	}

}

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

	body {
		overflow-x: auto;
	}

	/*------------------------------------------------------*/
	/* N A V I G A T I O N */
	/*------------------------------------------------------*/

	#navigation {
		height: 40px;
	}

	#navigation ul {
		height: 40px;
		float: right;
		position: relative;
		right: 20px;
	}

	#navigation ul  li {
		list-style: none;
		list-style-image: none;
		height: 40px;
		float: left;
		color: black;
		padding-right: 40px;
	}

	#navigation a {
		font-size: 16px;
		line-height: 40px;
	}

	/*------------------------------------------------------*/
	/* C O N T E N T */
	/*------------------------------------------------------*/

	#wrapper {
		width: 100%;
	}
	
	#header {	
		height: 80px;
		background: url(../images/header-bg.jpg) left center;
	}

	#headerlogo img {
		float: left;
	}
	
	#headline {
		position: relative;
	}

	#headline p {
		float: left;
		padding-left: 370px;
		color: black;
		font-size: 62px;
		line-height: 80px;	
	}

	.page-header {
		height: 188px;
		background-image: url(../images/page-header-bg.jpg);
		color: #C27A78;
		line-height: 188px;
		font-size: 21px;
		text-align: center;
	}

	.page-header.bottom {
		height: 170px;
		line-height: 30px;
		padding-top: 70px;
		background: #f0e6dd url(../images/page-header-bg-bottom.png);
		font-size: 21px;
	}

	.page_content {
		font-size: 16px;
		line-height: 22px;
		padding: 40px 0;
		color: #4D4D4D;
		min-height: 500px;
	}

	.mich {
		float: left;
		padding-left: 40px !important;
		padding-right: 20px;
		position: absolute;
		padding-bottom: 0;
	}
	
	.ueberMich {
		padding: 0;
	}
	
	.ueberMich p {
		padding-left: 308px;
		padding-right: 40px;
	}

	.makeup {
		float: left;
		padding-left: 60px;
		padding-right: 40px;
		
	}
	
	.left p {
		margin-left: 320px;
	}
	
	.right p {
		margin-right: 320px;
	}

	.section {
		padding: 60px; 
		border-bottom: 1px solid black;
	}

	#section1 {
		padding-top: 0;
	}

	.section.last {
		padding-bottom: 0;
		border-bottom: 0;
	}
	
	.smart {
		display: block;
	}
	
	.floatleft {
		float: left;
		width: 300px;
		padding-right: 40px;
		margin-left: 0 !important;
	}

	.floatleft img,
	.floatright img {
		width: 100%;
	}

	.floatright {
		float: right;
		width: 300px;
		padding-left: 40px;
		margin-right: 0 !important;
	}
	
	/*------------------------------------------------------*/
	/* Kontakt Formular */
	/*------------------------------------------------------*/

	.kontaktForm,
	.kontaktMap {
		height: 400px;
		margin: 0 auto;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: 0px 0px 10px 1px rgba(100, 100, 100, 1);
		box-shadow: 0px 0px 10px 1px rgba(100, 100, 100, 1);
	}
	
	.kontaktForm {
		padding: 20px;
		height: 431px;
		width: 660px;
	}

	.kontaktMap {
		margin-top: 60px;
		width: 700px;
		display: block;
	}
	
	.formTitle {
		font-size: 21px;
		padding-bottom: 20px;
		border-bottom: 1px solid #4D4D4D;
	}
	
	.formSubTitle {
		line-height: 27px;
		clear: both;
		padding-bottom: 10px;
		position: absolute;
	}
	
	.field {
		width: 100%;
		padding: 5px 0;
		border-bottom: 1px solid #4D4D4D;
		overflow: hidden;
	}
	
	.field label {
		display: inline-block;
		width: 140px;
		position: absolute;
		line-height: 27px
	}
	
	.field input {
		border: none;
		outline: none;
		height: 27px;
		font-size: 16px;
		background: #EEEEEE;
		padding-left: 5px;
		margin-left: 140px;
		width: 520px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.checkbox {
		width: 33.333%;
		float: left;
		padding-bottom: 10px;
	}
	
	.checkIntend {
		padding-left: 140px;
		padding-top: 10px;
	}
	
	.trenner {
		border-bottom: 1px solid #4D4D4D;
		padding-top: 10px;
	}
	
	.field textarea {
		border: none;
		outline: none;
		margin-left: 140px;
		width: 520px;
		padding-left: 5px;
		padding-top: 5px;
		background: #EEEEEE;
		font-size: 16px;
		height: 76px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.button {
		margin: 0 auto;
		text-align: center;
		padding-top: 15px;
	}
	
	#sendKontakt {
		background: #FFB052;
		padding: 3px 8px;
		border: 0;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		color: white;
		font-size: 16px;
	}
	
	/*------------------------------------------------------*/
	/* Footer */
	/*------------------------------------------------------*/

	#footer{
		background: #f0e6dd;
		height: 136px;
		font-size: 14px;
	}

	.subFooter {
		height: 25px;
	}

	.footer {
		width: 28.333%;
		float: left;
		position: relative;
		top: -10px;
		padding: 0 0 0 5%;
	}
	
	.footer.smart {
		display: block;
	}
	
	.footer.copy {
		display: none;
	}

	.footerAid {
		height: 52px;
		background: #f0e6dd;
	}

	.impressum, .kontakt {
		font-weight: bold;
	}
	
	#login {
		-webkit-appearance: none;
		background: #FFB052;
		padding: 3px 8px;
		border: 0;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		color: white;
	}

	#login_username {
		height: 22px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		border: 1px solid #8F8F8F;
		color: #4D4D4D;
		margin-bottom: 20px;
		padding-left: 22px;
		background: white url(../images/benutzer.png) 3px center no-repeat; 
	}

	#login_username-label,
	#login_password-label {
		display: none;
	}

	#login_password {
		height: 22px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		padding-left: 22px;
		border: 1px solid #8F8F8F;
		color: #4D4D4D;
		background: white url(../images/passwort.png) 3px center no-repeat;
	}
	
	.kundeInput input {
		height: 27px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		border: 2px solid #8F8F8F;
		color: #4D4D4D;
		padding-left: 30px;
		background: white url(../images/check.png) 3px center no-repeat;
	}

}

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

	/*------------------------------------------------------*/
	/* N A V I G A T I O N */
	/*------------------------------------------------------*/

	

	/*------------------------------------------------------*/
	/* C O N T E N T */
	/*------------------------------------------------------*/

	#wrapper {
		width: 1024px;
		margin: 0 auto;
	}

	.page-header {
		height: 188px;
		background-image: url(../images/page-header-bg.jpg);
		color: #C27A78;
		line-height: 188px;
		font-size: 21px;
		text-align: center;
	}

	.page-header.bottom {
		height: 240px;
		background: #f0e6dd url(../images/page-header-bg-bottom.png);
		line-height: 188px;
		padding-top: 0;
	}

	.page_content {
		font-size: 16px;
		line-height: 22px;
		padding: 60px 0;
		color: #4D4D4D;
		min-height: 500px;
	}

	.mich {
		float: left;
		padding-left: 70px !important;
		padding-right: 20px;
		position: absolute;
	}
	
	.ueberMich p {
		padding-left: 358px;
		padding-right: 40px;
	}

	.makeup {
		float: left;
		padding-left: 60px;
		padding-right: 40px;
		
	}
	
	.smart {
		display: none;
	}

	.section {
		padding: 60px; 
		border-bottom: 1px solid black;
	}

	#section1 {
		padding-top: 0;
	}

	.section.last {
		padding-bottom: 0;
		border-bottom: 0;
	}

	/*------------------------------------------------------*/
	/* Kontakt Formular */
	/*------------------------------------------------------*/

	

	/*------------------------------------------------------*/
	/* Footer */
	/*------------------------------------------------------*/

	#footer{
		background: #f0e6dd;
		height: 136px;
		font-size: 14px;
	}

	.subFooter {
		height: 25px;
	}

	.footer {
		width: 28.333%;
		float: left;
		position: relative;
		top: -10px;
		padding-left: 5%;
	}

	.footerAid {
		height: 52px;
		background: #f0e6dd;
	}

	.impressum, .kontakt {
		font-weight: bold;
	}
	
	#login {
		-webkit-appearance: none;
		background: #FFB052;
		padding: 3px 8px;
		border: 0;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		color: white;
	}

	#login_username {
		height: 22px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		border: 1px solid #8F8F8F;
		color: #4D4D4D;
		margin-bottom: 20px;
		padding-left: 22px;
		background: white url(../images/benutzer.png) 3px center no-repeat; 
	}

	#login_username-label,
	#login_password-label {
		display: none;
	}

	#login_password {
		height: 22px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		padding-left: 22px;
		border: 1px solid #8F8F8F;
		color: #4D4D4D;
		background: white url(../images/passwort.png) 3px center no-repeat;
	}
	
	.kundeInput input {
		height: 27px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		border: 2px solid #8F8F8F;
		color: #4D4D4D;
		padding-left: 30px;
		background: white url(../images/check.png) 3px center no-repeat;
	}
	
}	

/* =================== Helper =================== */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.invisible {
	display: none;
}