/* Kontakt */

* {margin: 0; padding: 0; box-sizing: border-box;}
*:focus {outline: 0;}

html {background: rgb(0,0,0); color: rgb(200,200,200); font-size: 1em; font-family: 'Lato', sans-serif; font-weight: 300; width: 100%; height: 100%;}

body {height: 100%;}

header {height: 100px; width: 100%; padding: 20px 50px;}
header img {width: auto; height: 80px;}

#text {padding: 10px 50px;}

h3 {margin-bottom: 15px; text-transform: uppercase; font-weight: 300;}
strong {text-transform: uppercase;}

#box {position: relative; top: 46%; transform: translateY(-50%);}


@media all and (max-width: 600px) {
header img {margin-top: 15px;}
header {padding: 0px 30px;}
#text {padding: 20px 30px;}
}

#text a {color: rgb(200,200,200); text-decoration: none;}
#text a:hover {border-bottom: 1px solid rgb(200,200,200);}


form {display: block; margin-top: 15px;}
.name-field, .email-field, .message-field, .submit-btn {width: 30%; margin-top: 10px;}

.name-field, .email-field, .message-field {padding: 10px 15px; color: rgb(200,200,200); font-size: 0.8em; font-family: 'Lato', sans-serif; font-weight: 300; background: rgb(0,0,0); border: 1px solid rgb(200,200,200);}

.message-field {height: 100px; margin-bottom: 50px;}

.submit-btn {margin-top: 10px; width: 100px; padding: 10px; background: rgb(0,0,0); border: 1px solid rgb(200,200,200); color: rgb(200,200,200); font-size: 0.8em; font-family: 'Lato', sans-serif; font-weight: 300;}

.submit-btn:hover {background: rgb(200,200,200); color: rgb(0,0,0); transition:all 0.3s ease;}

#back a {color: rgb(200,200,200); text-decoration: none; border-bottom: 1px solid rgb(200,200,200)}
#back a:hover {color: rgb(179,154,142); border-bottom: 1px solid rgb(179,154,142);}

@media all and (max-width: 600px) {
.name-field, .email-field, .message-field, .submit-btn {width: 100%;}
}

.text-danger, .result {font-style: italic; margin-top: 10px; font-size: 0.9em;}