/* ===== */
/* fonts */
/* ===== */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("../font/OpenSans-Regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("../font/OpenSans-Bold.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  src: local("Oswald Regular"), local("Oswald-Regular"), url("../font/Oswald-Regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ====== */
/* basics */
/* ====== */

body {
  display: flex; /* 43 */
  flex-direction: column;
  min-height: 100vh; /* 50 */
  margin: 0 auto; /* 56 */
  font-family: "Open Sans", sans-serif; /* 72 */
  font-size: 12px; /* 73 */
  color: #333; /* 83 */
}

footer {
  margin-top: 20px; /* 57 */
}

header, footer {
    padding: 10px; /* 51 */
}

hr {
  width: 50%; /* 45 */
  height: 1px; /* 46 */
  background-image: -webkit-linear-gradient(left, #35a9d9, #fff, #35a9d9); /* 105 */
  background-image: -moz-linear-gradient(left, #35a9d9, #fff, #35a9d9); /* 105 */
  background-image: -ms-linear-gradient(left, #35a9d9, #fff, #35a9d9); /* 105 */
  background-image: -o-linear-gradient(left, #35a9d9, #fff, #35a9d9); /* 105 */
  border: 0; /* 109 */
}

.bluebar {
  color: #fff; /* 83 */
  text-align: center; /* 84 */
  background-color: #35a9d9; /* 104 */
}

.bluebar p {
  margin: 0; /* 56 */
}

/* ====== */
/* layout */
/* ====== */

.container__bottom {
  display: flex; /* 43 */
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
}

.container__top {
  display: flex; /* 43 */
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
  height: 450px; /* 46 */
  color: #fff; /* 83 */
  background-image: url('../img/diamondcross.jpg'); /* 105 */
  background-position: center; /* 106 */
  background-repeat: no-repeat; /* 107 */
  background-size: cover; /* 108 */
}

.container div {
  width: 40%; /* 45 */
  min-width: 300px; /* 49 */
  padding: 20px 10px 0 10px; /* 51 */
}

.container__top div {
  padding: 0; /* 52 */
  margin-right: calc(10% - 10px); /* 58 */
}

.vspace {
  margin-top: 5%; /* 57 */
  margin-bottom: 10px; /* 59 */
}

/* ====== */
/* images */
/* ====== */

.icon {
  float: left; /* 44 */
  width: 80px; /* 45 */
  margin-right: 10px; /* 58 */
}

.logo {
  height: 80px; /* 46 */
}

.product {
  width: 80%; /* 45 */
  min-width: 300px; /* 49 */
}

/* ========== */
/* typography */
/* ========== */

h1 {
  margin: 0; /* 56 */
  font-family: "Oswald", sans-serif; /* 72 */
}

p {
  margin: 10px 0; /* 56 */
}

a:link, a:visited {
  color: #333; /* 83 */
  text-decoration: underline; /*85 */
}

a:hover {
  text-decoration: none; /*85 */
}

.bluebar a:link, .bluebar a:visited, .note a:link, .note a:visited {
  color: #fff; /* 83 */
}

.bluepage p {
  margin: 10px; /* 56 */
}

.imprint {
  color: #333; /* 83 */
}

.imprint a:link, .imprint a:visited {
  color: #333; /* 83 */
}

.note {
  font-size: xx-small; /* 73 */
}

/* ===== */
/* forms */
/* ===== */

button {
  cursor: pointer; /* 101 */
}

.bluepage .form__button {
  color: #35a9d9; /* 83 */
  background-color: #fff; /* 104 */
}

.bluepage .form__button:hover {
  color: #333; /* 83 */
}

.bluepage .form__text {
  width: 250px; /* 45 */
}

.form {
  padding: 2px 10px; /* 51 */
  font-family: "Open Sans", sans-serif; /* 72 */
  font-size: 12px; /* 73 */
  border: 1px solid transparent; /* 109 */
  border-radius: 3px; /* 132 */
}

.form__button {
  color: #fff; /* 83 */
  background-color: #35a9d9; /* 104 */
}

.form__button:hover {
  color: #333; /* 83 */
}

.form__text {
  width: calc(100% - 20px); /* 45 */
}