@font-face {
    font-family:	'SourceSansPro';
    src:					url('../fonts/SourceSansPro-Regular.woff'),
									url('../fonts/SourceSansPro-Regular.woff2'),
									local("?");
    font-weight:	500;
    font-style:		normal;
    font-display: swap;
}

@font-face {
    font-family:	'SourceSansPro';
    src:					url('../fonts/SourceSansPro-Bold.woff'),
									url('../fonts/SourceSansPro-Bold.woff2'),
									local("?");
    font-weight:	700;
    font-style:		normal;
    font-display: swap;
}

html                                                                   { box-sizing: border-box }
*, *:before, *:after                                                   { box-sizing: inherit }
body                                                                   { background: #f5f5f5; margin: 0px; color: #000000; font-size: 14px; line-height: 24px; font-weight: 500; font-family: 'SourceSansPro', Helvetica, Arial, sans-serif }
h1                                                                     { margin: 0px; color: #619e74; font-size: 30px; line-height: 48px; font-weight: 700 }
h2                                                                     { margin: 0px; font-size: 18px; line-height: 30px; font-weight: 500 }
a                                                                      { color: #000000; text-decoration: none }
table                                                                  { width: 100%; border-style: none; border-spacing: 0px }
td                                                                     { padding: 0px 0px 10px 20px }
td:first-child                                                         { padding: 0px 0px 10px 0px }
select,
input[type=text]                                                       { float: left; width: 100%; height: 40px; padding: 7px; background: #f5f5f5; border: solid 1px #d9d7d5; border-radius: 3px; color: #000000; font-size: 14px; line-height: 24px; font-weight: 500; font-family: 'SourceSansPro', Helvetica, Arial, sans-serif }
select.error,
input[type=text].error                                                 { border-color: #ff0000 }
input[type=submit]                                                     { float: right; width: 60%; height: 60px; padding: 0px; background: #444444; border: none; border-radius: 3px; color: #ffffff; font-size: 14px; line-height: 14px; font-weight: 500; font-family: 'SourceSansPro', Helvetica, Arial, sans-serif; text-transform: uppercase; cursor: pointer; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out }
input[type=submit]:hover                                               { background: #cccccc }
header                                                                 { float: left; width: 100%; padding: 20px calc(50% - 620px) 20px calc(50% - 620px); background: #d9d7d5 }
header a                                                               { display: block; float: left; width: 200px; height: 40px; background: url(../images/layout/Holzboden-Direkt-Logo.png) no-repeat center; background-size: cover; margin: 20px }
section                                                                { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 20px calc(50% - 620px) 20px calc(50% - 620px); background: #ffffff }
section h1                                                             { float: left; width: calc(100% - 40px); margin: 20px }
section hr                                                             { float: left; width: calc(100% - 40px); height: 1px; background: #d9d7d5; border: none; margin: 20px }
section form                                                           { float: left; width: calc(50% - 40px); margin: 20px }
section div                                                            { float: left; width: calc(100% - 40px); margin: 20px }
section span                                                           { display: block; float: left; width: calc(100% - 40px); margin: 0px 20px 0px 20px; color: #ff0000 }
footer                                                                 { float: left; width: 100%; padding: 20px calc(50% - 620px) 20px calc(50% - 620px) }
footer ul                                                              { float: right; padding: 10px; margin: 0px; list-style-type: none }
footer ul li                                                           { display: block; float: left; margin: 10px }
footer ul li a                                                         { display: block; float: left; line-height: 14px; text-transform: uppercase }
footer div                                                             { float: left; margin: 20px }

@media only screen and (max-width: 1279px) {
	body                                                                   { font-size: 12px; line-height: 18px }
	h1                                                                     { font-size: 24px; line-height: 36px }
	h2                                                                     { font-size: 14px; line-height: 24px }
	td                                                                     { display: block; float: left; width: 100%; padding: 0px 0px 10px 0px }
	td:first-child                                                         { padding: 0px 0px 5px 0px }
	select,
	input[type=text]                                                       { padding: 10px; font-size: 12px; line-height: 18px }
	input[type=submit]                                                     { width: 100%; font-size: 12px; line-height: 12px }
	header                                                                 { padding: 10px calc(50% - 170px) 10px calc(50% - 170px) }
	header a                                                               { width: 150px; height: 30px; margin: 10px }
	section                                                                { padding: 20px calc(50% - 170px) 20px calc(50% - 170px) }
	section h1,
	section hr,
	section form,
	section div                                                            { width: calc(100% - 20px); margin: 10px }
	section span                                                           { margin: 0px 10px 0px 10px }
	footer                                                                 { padding: 10px calc(50% - 170px) 10px calc(50% - 170px) }
	footer ul                                                              { float: left; padding: 5px }
	footer ul li                                                           { margin: 5px }
	footer ul li a                                                         { line-height: 12px }
	footer div                                                             { margin: 10px }
}