/* Colors */
/* Font familys */
/* Breakpoints */
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

a { background-color: transparent; }

a:active, a:hover { outline: 0; }

img { border: 0; }

svg:not(:root) { overflow: hidden; }

input { border-radius: 0; }

button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

button { overflow: visible; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

button[disabled], html input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

textarea { overflow: auto; }

table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

html, body { background-color: #e5e5e5; color: #4a4a4a; min-height: 100vh; }

html * { box-sizing: border-box; }

body { font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 15px; line-height: 1.5; text-align: center; }

body { display: flex; flex-direction: column; }

main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }

a { color: #6483ba; font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }

body, ul, ol, p, h1, h2, h3, h4, h5, h6, form { margin: 0; padding: 0; }

img { max-width: 100%; height: auto; }

.container { max-width: 1000px; padding: 0 30px; margin: 0 auto; }

header img { margin: 0 auto; }

header, footer { background-color: #6483ba; padding: 20px 0; color: white; }
header img, footer img { display: block; }

footer .container { display: flex; align-items: center; justify-content: space-between; }

main { padding: 40px 0; }
main h1 { font-size: 32px; font-weight: 600; }
main h2 { font-size: 20px; font-weight: 300; margin-bottom: 25px; }
main p + p { margin-top: 10px; }

.contactform { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 400px; margin: 40px auto 20px auto; position: relative; }
.contactform label { position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: 40px; line-height: 40px; pointer-events: none; opacity: 0.75; }
.contactform label, .contactform button { transition: all 150ms ease; }
.contactform input { flex: 1; background-color: #f8f8f8; text-align: center; font-weight: 600; margin-bottom: 10px; }
.contactform button { background-color: gray; color: white; font-weight: 700; font-size: 14px; }
.contactform button:hover { background-color: #6483ba; }
.contactform input:focus, .contactform button:focus { outline: none; }
.contactform input:focus ~ label, .contactform input.used ~ label { opacity: 0; }
.contactform input:focus, .contactform input:hover { background-color: #ffffff; }
.contactform input, .contactform button { line-height: 40px; height: 40px; border: 1px solid transparent; border-radius: 0; padding: 0 15px; width: 100%; }

@media (min-width: 450px) { main h1 { font-size: 42px; }
  .contactform { flex-direction: row; }
  .contactform input { text-align: left; margin-bottom: 0; }
  .contactform label { left: 15px; right: auto; }
  .contactform input, .contactform button { width: auto; } }