* { outline: 0; border: 0; margin: 0; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; word-wrap: break-word; }

*::before, *::after { box-sizing: border-box; }

html, body { padding: 0; margin: 0; width: 100%; height:100%; background-color: rgba(255,255,255,1); }
body { font-family: 'Questrial', sans-serif; font-weight: 300; font-size: 1em; }

img { padding:0; margin:0; border:0; }

.left { float: left; }
.right { float: right; }

a { outline: none; text-decoration:none; color: rgba(30,155,67,1); }
a:active,
a:focus,
a:link,
a:visited { text-decoration:none; }
a:hover { text-decoration:underline; }

p { margin: 1.5em 0; }

p.error,
p.success {	box-sizing: border-box;	width: 100%; padding: .6em .5em .6em 2.5em;	color: rgba(255,255,255,1);	-webkit-border-radius: 3px; border-radius: 3px;	background-position: .5em .3em; background-repeat: no-repeat; }
p.error { background-color: rgba(255,0,0,1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E"); }
p.success { background-color: rgba(110,165,26,1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"); }

input, textarea, button { -webkit-border-radius: .3em; border-radius: .3em; font-size: 1.3em; padding: .5em; box-sizing: border-box; }
input[type=text], textarea { background-color: rgba(0,0,0,.05); border: .05em solid rgba(0,0,0,.3); }
button { background-color: rgba(112,168,25,1); color: rgba(255,255,255,1); cursor: pointer; float: right; padding: .8em 2em; }
button.sent { background-image:url(/images/preloader.svg); background-repeat: no-repeat; background-position: center 50%; opacity: 0.7; }
textarea { width: 100%; height: 10em;}
label.lleft { display: block; }

body > main input.error,
body > main textarea.error { border: .2em solid rgba(255,0,0,1); }

body > main span.errorhint { color: rgba(255,0,0,1); display: block; }

body > header { position: absolute; top: 0; width: 100%; height: 6em; font-size: 1em; background-color:rgba(240,240,240,1); -webkit-box-shadow: 0 .2em .5em 0 rgba(0,0,0,0.4); -moz-box-shadow: 0 .2em .5em rgba(0,0,0,0.4); box-shadow: 0 .2em .5em 0 rgba(0,0,0,0.4);}
body > header > a, body > header > a:hover { color: rgba(0,0,0,1); text-decoration: none; }
body > header > a > h1 { font-size: 1.7em; text-align: left; margin-left: 1em; padding-top: 2em; }

body > main { box-sizing: border-box; position: absolute; top:6.5em; bottom: 5em; width:100%; padding: 2em; overflow-y: scroll; line-height: 1.25em; }
body > main h2 { margin-bottom: .5em; box-sizing: border-box; }
body > main img { border: .1em solid rgba(0,0,0,1); }


body > main > div.flex { display: flex; flex-direction:row; }
body > main > div.home { justify-content: center; }
body > main a#schneidleisten,
body > main a#zubehoer,
body > main a#maschinenservice { opacity: .85; color: rgba(0,0,0,1); box-sizing: border-box; margin:2em; border: .1em solid rgba(0,0,0,.3); width:350px; height: 233px; cursor: pointer; background-position: center; background-repeat: no-repeat;}

body > main a#schneidleisten:hover,
body > main a#zubehoer:hover,
body > main a#maschinenservice:hover { opacity: 1; }

body > main a#schneidleisten > p,
body > main a#zubehoer > p,
body > main a#maschinenservice > p { font-size: 1.5em; position: absolute; top: 12em;}

body > main a#schneidleisten { background: url('/images/schneidleisten.jpg'); }
body > main a#zubehoer { background: url('/images/zubehoer.jpg'); }
body > main a#maschinenservice { background: url('/images/mso96x96.png') no-repeat .2em.2em; padding-top: 6.4em; padding-left: .5em;}


body > main > div.schneidleiste {align-content: flex-start; border-bottom: .1em solid rgba(0,0,0,.5);}
body > main > div.schneidleiste:nth-child(odd) {background-color: rgba(0,0,0,.08);}
body > main > div.schneidleiste:hover {border-bottom: .1em solid rgba(30,155,67,1);color:rgba(30,155,67,1);}
body > main > div.flex > div.head {font-weight:bold; margin: .8em 0;}
body > main > div.flex > div.row1,
body > main > div.flex > div.row2,
body > main > div.flex > div.row3 {padding:.3em; }

body > main > div.flex > div.row1 { flex-basis: 5em; flex-grow: 1; text-align: left;}
body > main > div.flex > div.row2 { flex-basis: 10em; flex-grow: 8; text-align: left;}
body > main > div.flex > div.row3 { flex-basis: 2em; flex-grow:3; text-align: right;}

body > main > form { margin-bottom: 2em; }

body > footer { position: absolute; bottom: 0; width: 100%; height: 5em; background-color:rgba(0,0,0,1); }
body > footer > ul { float:right; margin-top: 2em; list-style: none; padding-left:0; }
body > footer > ul > li { display: inline-block; }
body > footer > ul > li > a { color: rgba(255,255,255,1); padding: 1em; }
body > footer > ul > li > a:before{ content: ""; width: .4rem; height: .4rem; position: absolute; border: 0 solid transparent;  border-right: .15rem solid rgba(255,255,255,0.9);  border-bottom: .15rem solid rgba(255,255,255,0.9); transform: rotate(-45deg); margin-top:0.35em; margin-left: -1em }

@media all and (max-width: 1250px) {
    body > main a#schneidleisten,
    body > main a#zubehoer,
    body > main a#maschinenservice { margin:1em; width:350px; height: 233px;}
 
}

@media all and (max-width: 1000px) {
    body > main a#schneidleisten,
    body > main a#zubehoer,
    body > main a#maschinenservice { margin:.5em; width:300px; }
}

@media all and (max-width: 870px) {
    body > main > div.home { flex-direction: column; }
    body > main a#schneidleisten,
    body > main a#zubehoer,
    body > main a#maschinenservice {  width:350px; margin:0 auto 3em auto;}
    body > main a#schneidleisten > p,
    body > main a#zubehoer > p,
    body > main a#maschinenservice > p { font-size: 1.5em; position: relative; top: 8.5em; }
    body > main a#maschinenservice > p { top: -.7em;}
}


@media all and (max-width: 450px) {    
    body > header { height: 4em; }    
    body > header > a > h1 { font-size: 1.3em; text-align: left; margin-left: .6em; padding-top: 1.5em; }
    body > main { top:4.5em; }
    input[type=submit] { float: none; padding: .8em 2em; width: 100%; }
	input[type=text] { width: 100%; }
	button { width:100%; float: none; }	
}

@media all and (max-width: 420px) {
    body > main a#schneidleisten,
    body > main a#zubehoer,
    body > main a#maschinenservice {  width:100%; }
}

@media all and (max-width: 385px) {
    body > main { padding: 1em; }
}

@media all and (max-width: 350px) {    
    body > header { height: 3em; }    
    body > header > a > h1 { font-size: 1em; text-align: left; padding-top: 1.2em; }
    body > main { top:3.5em; padding: .5em; }
}