html,
body {
  min-height: 100%;
  height: 100%;
  color: #444;
  font-size: 14px;
  line-height: 1.6;
}
* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
}
a {
  color: darkgoldenrod;
  text-decoration: none;
}
h3.title {
  margin-top: 2em;
  font-size: 2em;
  font-weight: 100;
  text-align: center;
  border-bottom: 1px solid darkgoldenrod;
}
#page {
  display: flex;
  min-height: 100%;
}
@media screen and (max-width: 930px) {
  #page {
    flex-direction: column-reverse;
  }
}
#page .lang {
  position: fixed;
  top: 0;
  left: 0;
}
@media screen and (max-width: 930px) {
  #page .lang {
    top: inherit;
    bottom: 0;
  }
}
#page .lang img {
  width: 48px;
}
#page .nav {
  position: fixed;
  top: 157px;
  left: 0;
  display: flex;
  flex-direction: column;
}
@media (orientation: landscape) and (max-width: 700px) {
  #page .nav {
    top: 95px;
  }
}
#page .nav a {
  display: flex;
  padding: 10px;
  background-color: darkgoldenrod;
  color: white;
  align-items: center;
}
@media screen and (max-width: 930px) {
  #page .nav a {
    padding: 20px 5px;
  }
}
@media (orientation: landscape) and (max-width: 700px) {
  #page .nav a {
    padding: 10px 5px;
    font-size: .8em;
  }
}
#page .nav a:hover {
  background-color: #d0980c;
}
#page .nav a i {
  font-size: 2em;
  width: 1em;
  text-align: center;
}
#page .nav a span {
  display: none;
}
#page main.content {
  flex: 1;
  background: #f2f2f2;
  /* Old browsers */
  background: -moz-linear-gradient(left, #f2f2f2 0%, #ffffff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #f2f2f2 0%, #ffffff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #f2f2f2 0%, #ffffff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#ffffff', GradientType=1);
  /* IE6-9 */
}
#page main.content header {
  text-align: center;
  margin-bottom: 2em;
  padding-bottom: 1em;
  padding-top: 2em;
  border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 700px) {
  #page main.content header {
    padding: 2em 2em 1em 3em;
  }
}
#page main.content header h1,
#page main.content header h2 {
  font-weight: 100;
  color: darkgoldenrod;
}
#page main.content header h1 {
  font-weight: 400;
  margin-top: 0;
}
#page main.content .content {
  padding: 0 2em 2em 3em;
}
#page main.content .content .text-blocks {
  display: flex;
}
@media screen and (max-width: 700px) {
  #page main.content .content .text-blocks {
    flex-direction: column;
  }
}
#page main.content .content .text-blocks .block {
  flex: 1;
  padding: 2em;
}
#page main.content .content .text-blocks .block h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 100;
  font-size: 2em;
  margin-top: 0;
  border-bottom: 1px solid darkgoldenrod;
  padding-bottom: 1em;
  color: darkgoldenrod;
}
#page main.content .content .text-blocks .block h3 i {
  font-size: 2em;
  margin-bottom: 10px;
}
#page main.content .content .imprint table {
  margin-bottom: 2em;
}
#page main.content .content .imprint table td {
  padding: 1em 0;
}
@media screen and (max-width: 600px) {
  #page main.content .content .imprint table td {
    display: block;
  }
}
#page main.content .content .imprint .credit {
  border-top: 1px solid #ccc;
  margin-top: 4em;
  text-align: center;
  color: #888;
  padding-top: 1em;
  font-size: .9em;
}
#page main.content .content .contact form {
  width: 100%;
}
#page main.content .content .contact form .form-row {
  display: flex;
}
@media screen and (max-width: 600px) {
  #page main.content .content .contact form .form-row {
    flex-direction: column;
  }
}
#page main.content .content .contact form .form-row .column {
  flex: 1;
  padding: 1em;
}
#page main.content .content .contact form .form-row .column input,
#page main.content .content .contact form .form-row .column textarea {
  width: 100%;
  background-color: white;
  border: 1px solid #ccc;
  padding: 1em;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -ms-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}
#page main.content .content .contact form .form-row .column input:focus,
#page main.content .content .contact form .form-row .column textarea:focus,
#page main.content .content .contact form .form-row .column input:active,
#page main.content .content .contact form .form-row .column textarea:active {
  border-color: darkgoldenrod;
}
#page main.content .content .contact form .form-row .column button {
  background-color: darkgoldenrod;
  padding: .5em 3em;
  border: 1px solid #a0740a;
  border-bottom-width: 2px;
  color: white;
  font-weight: 400;
}
#page main.content .content .contact form .form-row .column button i {
  margin-right: 1em;
  display: none;
}
#page main.content .content .contact form .form-row .column .callback {
  padding: 1em 0;
}
#page main.content .content .contact form .form-row .column .callback i {
  margin-right: 1em;
}
#page main.content .content .contact form .form-row .column .callback .success {
  display: none;
}
#page main.content .content .contact form .form-row .column .callback .success i {
  color: green;
}
#page main.content .content .contact form .form-row .column .callback .fail {
  display: none;
}
#page main.content .content .contact form .form-row .column .callback .fail i {
  color: tomato;
}
#page aside.sidebar {
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 310px;
}
@media screen and (max-width: 1100px) {
  #page aside.sidebar {
    width: 265px;
  }
}
@media screen and (max-width: 930px) {
  #page aside.sidebar {
    flex-direction: row;
    width: 100%;
    align-items: center;
  }
}
@media screen and (max-width: 930px) {
  #page aside.sidebar header {
    display: none;
  }
}
#page aside.sidebar .logo {
  margin: 1em 0;
}
@media screen and (max-width: 930px) {
  #page aside.sidebar .logo {
    width: 200px;
  }
}
@media screen and (max-width: 600px) {
  #page aside.sidebar .logo {
    display: none;
  }
}
#page aside.sidebar .logo img {
  width: 100%;
}
#page aside.sidebar .contact {
  padding: 1em 2em;
  flex: 1;
  color: #aaa;
}
@media screen and (max-width: 930px) {
  #page aside.sidebar .contact {
    padding: 0 1em;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
#page aside.sidebar .contact h2 {
  font-weight: 400;
}
@media screen and (max-width: 930px) {
  #page aside.sidebar .contact h2 {
    display: none;
  }
}
