@import "//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i";
html {
  box-sizing: border-box; }

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

@font-face {
  font-family: "iconfont";
  font-style: normal;
  font-weight: normal;
  src: url(".eot?#iefix") format("embedded-opentype"), url(".woff2") format("woff2"), url(".woff") format("woff"), url(".ttf") format("truetype"), url(".svg#iconfont") format("svg"); }
html {
  box-sizing: border-box; }

body:before, body:after {
  display: table;
  content: ''; }

*,
*:before,
*:after {
  box-sizing: inherit;
  position: relative; }

html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: normal; }

ul {
  list-style: none; }

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

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

legend {
  display: none; }

.alpha-heading,
.beta-heading,
.gamma-heading,
.delta-heading {
  font-family: "Open Sans", sans serif;
  display: block; }

a {
  font-family: "Open Sans", sans serif; }

p, .paragraph {
  font-size: 16px;
  line-height: 24px;
  font-weight: 100; }

.alpha, .alpha-heading {
  font-size: 28px;
  line-height: 36px;
  margin-bottom: 10px; }

.beta, .beta-heading {
  font-size: 24px;
  line-height: 30px;
  margin-bottom: 20px; }

.gamma, .gamma-heading {
  font-size: 16px;
  line-height: 26px;
  text-transform: uppercase; }

.delta, .delta-heading {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 5px; }

.alpha-heading {
  font-weight: bold; }

.beta-heading {
  font-weight: bold; }

.gamma-heading {
  font-weight: bold; }

.delta-heading {
  font-weight: bold; }

.heading-intro-combi .alpha-heading,
.heading-intro-combi .beta-heading,
.heading-intro-combi .gamma-heading,
.heading-intro-combi .delta-heading {
  margin-bottom: 5px; }

@media screen and (min-width: 768px) {
  .small {
    font-size: 15px;
    line-height: 19px; } }

p, .paragraph {
  margin-bottom: 20px; }
  p:last-child, .paragraph:last-child {
    margin-bottom: 0; }

li, pre, time, p, .paragraph, .quote {
  font-family: "Open Sans", sans serif; }

a {
  color: inherit;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

ul.default {
  list-style-type: disc;
  margin-bottom: 10px;
  margin-left: 20px;
  padding-left: 1em; }
  ul.default li {
    font-weight: 100; }
  ul.default:last-child {
    margin-bottom: 0; }

html {
  background: #fff;
  font-family: "Open Sans", sans serif;
  height: 100%; }

body {
  color: #000;
  -webkit-font-smoothing: antialiased;
  min-width: 990px;
  min-height: 100%;
  background-color: #f8f8f8; }

img {
  display: block;
  width: 100%; }

hr {
  border: 0;
  height: 1px;
  background-color: #000;
  margin-bottom: 40px; }

.button {
  background-color: #00917e;
  color: #fff;
  padding: 0 1.5em;
  border: 0;
  text-shadow: none;
  box-shadow: none;
  transition: background-color 0.3s;
  font-size: 14px;
  border-radius: 1px;
  outline: none;
  height: 40px;
  line-height: 40px; }
  .button:not(:disabled) {
    cursor: pointer; }
  .button:disabled {
    background-color: #e3e3e3; }
    .button:disabled:hover {
      background-color: #e3e3e3; }
  .button:hover {
    text-decoration: none;
    background-color: #007465; }

.content-container {
  width: 990px;
  margin: 20px auto; }

.page-content {
  padding-bottom: 120px; }

.grid-wrapper {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%; }
  .grid-wrapper::after {
    clear: both;
    content: "";
    display: block; }

@media screen and (min-width: 768px) {
  .grid-right-to-left .grid-container.grid-default-content {
    float: right;
    display: block;
    margin-left: 1.4447059041%;
    width: 100%; }
    .grid-right-to-left .grid-container.grid-default-content:last-child {
      margin-left: 0; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    .grid-right-to-left .grid-container.grid-default-content {
      float: right;
      display: block;
      margin-left: 1.4447059041%;
      width: 49.2776470479%;
      margin-right: 0%; }
      .grid-right-to-left .grid-container.grid-default-content:last-child {
        margin-left: 0; } }
@media screen and (min-width: 768px) {
    .grid-right-to-left .grid-container.grid-default-content.omega {
      margin-left: 0; }
  .grid-right-to-left .grid-container.grid-wide-content {
    float: right;
    display: block;
    margin-left: 1.4447059041%;
    width: 100%;
    margin-right: 0%;
    margin-left: 0; }
    .grid-right-to-left .grid-container.grid-wide-content:last-child {
      margin-left: 0; }
  .grid-right-to-left .grid-container.grid-quart-content {
    float: right;
    display: block;
    margin-left: 1.4447059041%;
    width: 23.9164705719%; }
    .grid-right-to-left .grid-container.grid-quart-content:last-child {
      margin-left: 0; }
  .grid-right-to-left .grid-container.grid-half-content {
    float: right;
    display: block;
    margin-left: 1.4447059041%;
    width: 49.2776470479%; }
    .grid-right-to-left .grid-container.grid-half-content:last-child {
      margin-left: 0; }
  .grid-right-to-left .grid-container.grid-three-quart-content {
    float: right;
    display: block;
    margin-left: 1.4447059041%;
    width: 74.638823524%; }
    .grid-right-to-left .grid-container.grid-three-quart-content:last-child {
      margin-left: 0; }
  .grid-right-to-left .grid-container.grid-shift {
    margin-right: 6.340294119%; }
  .grid-left-to-right .grid-container.grid-default-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 100%; }
    .grid-left-to-right .grid-container.grid-default-content:last-child {
      margin-right: 0; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    .grid-left-to-right .grid-container.grid-default-content {
      float: left;
      display: block;
      margin-right: 1.4447059041%;
      width: 49.2776470479%;
      margin-left: 0%; }
      .grid-left-to-right .grid-container.grid-default-content:last-child {
        margin-right: 0; } }
@media screen and (min-width: 768px) {
    .grid-left-to-right .grid-container.grid-default-content.omega {
      margin-right: 0; }
  .grid-left-to-right .grid-container.grid-wide-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 100%;
    margin-left: 0%;
    margin-right: 0; }
    .grid-left-to-right .grid-container.grid-wide-content:last-child {
      margin-right: 0; }
  .grid-left-to-right .grid-container.grid-quart-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 23.9164705719%; }
    .grid-left-to-right .grid-container.grid-quart-content:last-child {
      margin-right: 0; }
  .grid-left-to-right .grid-container.grid-half-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 49.2776470479%; }
    .grid-left-to-right .grid-container.grid-half-content:last-child {
      margin-right: 0; }
  .grid-left-to-right .grid-container.grid-three-quart-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 74.638823524%; }
    .grid-left-to-right .grid-container.grid-three-quart-content:last-child {
      margin-right: 0; }
  .grid-left-to-right .grid-container.grid-shift {
    margin-left: 6.340294119%; } }
@media screen and (max-width: 767px) {
  .grid-container.grid-mobile .grid-container.grid-default-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 100%; }
    .grid-container.grid-mobile .grid-container.grid-default-content:last-child {
      margin-right: 0; } }
  @media screen and (max-width: 767px) and (min-width: 768px) {
    .grid-container.grid-mobile .grid-container.grid-default-content {
      float: left;
      display: block;
      margin-right: 1.4447059041%;
      width: 49.2776470479%;
      margin-left: 0%; }
      .grid-container.grid-mobile .grid-container.grid-default-content:last-child {
        margin-right: 0; } }
@media screen and (max-width: 767px) {
    .grid-container.grid-mobile .grid-container.grid-default-content.omega {
      margin-right: 0; }
  .grid-container.grid-mobile .grid-container.grid-wide-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 100%;
    margin-left: 0%;
    margin-right: 0; }
    .grid-container.grid-mobile .grid-container.grid-wide-content:last-child {
      margin-right: 0; }
  .grid-container.grid-mobile .grid-container.grid-quart-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 23.9164705719%; }
    .grid-container.grid-mobile .grid-container.grid-quart-content:last-child {
      margin-right: 0; }
  .grid-container.grid-mobile .grid-container.grid-half-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 49.2776470479%; }
    .grid-container.grid-mobile .grid-container.grid-half-content:last-child {
      margin-right: 0; }
  .grid-container.grid-mobile .grid-container.grid-three-quart-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 74.638823524%; }
    .grid-container.grid-mobile .grid-container.grid-three-quart-content:last-child {
      margin-right: 0; }
  .grid-container.grid-mobile .grid-container.grid-shift {
    margin-left: 6.340294119%; } }

@media screen and (min-width: 768px) {
  .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right) .grid-container.grid-default-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 100%; }
    .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right) .grid-container.grid-default-content:last-child {
      margin-right: 0; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right) .grid-container.grid-default-content {
      float: left;
      display: block;
      margin-right: 1.4447059041%;
      width: 49.2776470479%;
      margin-left: 0%; }
      .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right) .grid-container.grid-default-content:last-child {
        margin-right: 0; } }
@media screen and (min-width: 768px) {
    .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right) .grid-container.grid-default-content.omega {
      margin-right: 0; }
  .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right) .grid-container.grid-wide-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 100%;
    margin-left: 0%;
    margin-right: 0; }
    .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right) .grid-container.grid-wide-content:last-child {
      margin-right: 0; }
  .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right) .grid-container.grid-quart-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 23.9164705719%; }
    .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right) .grid-container.grid-quart-content:last-child {
      margin-right: 0; }
  .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right) .grid-container.grid-half-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 49.2776470479%; }
    .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right) .grid-container.grid-half-content:last-child {
      margin-right: 0; }
  .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right) .grid-container.grid-three-quart-content {
    float: left;
    display: block;
    margin-right: 1.4447059041%;
    width: 74.638823524%; }
    .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right) .grid-container.grid-three-quart-content:last-child {
      margin-right: 0; }
  .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right) .grid-container.grid-shift {
    margin-left: 6.340294119%; } }
.grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right).grid-mobile .grid-container.grid-default-content {
  float: left;
  display: block;
  margin-right: 1.4447059041%;
  width: 100%; }
  .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right).grid-mobile .grid-container.grid-default-content:last-child {
    margin-right: 0; }
  @media screen and (min-width: 768px) {
    .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right).grid-mobile .grid-container.grid-default-content {
      float: left;
      display: block;
      margin-right: 1.4447059041%;
      width: 49.2776470479%;
      margin-left: 0%; }
      .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right).grid-mobile .grid-container.grid-default-content:last-child {
        margin-right: 0; } }
  .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right).grid-mobile .grid-container.grid-default-content.omega {
    margin-right: 0; }
.grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right).grid-mobile .grid-container.grid-wide-content {
  float: left;
  display: block;
  margin-right: 1.4447059041%;
  width: 100%;
  margin-left: 0%;
  margin-right: 0; }
  .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right).grid-mobile .grid-container.grid-wide-content:last-child {
    margin-right: 0; }
.grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right).grid-mobile .grid-container.grid-quart-content {
  float: left;
  display: block;
  margin-right: 1.4447059041%;
  width: 23.9164705719%; }
  .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right).grid-mobile .grid-container.grid-quart-content:last-child {
    margin-right: 0; }
.grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right).grid-mobile .grid-container.grid-half-content {
  float: left;
  display: block;
  margin-right: 1.4447059041%;
  width: 49.2776470479%; }
  .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right).grid-mobile .grid-container.grid-half-content:last-child {
    margin-right: 0; }
.grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right).grid-mobile .grid-container.grid-three-quart-content {
  float: left;
  display: block;
  margin-right: 1.4447059041%;
  width: 74.638823524%; }
  .grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right).grid-mobile .grid-container.grid-three-quart-content:last-child {
    margin-right: 0; }
.grid-wrapper:not(.grid-right-to-left):not(.grid-left-to-right).grid-mobile .grid-container.grid-shift {
  margin-left: 6.340294119%; }

.content-wrapper {
  background-color: #fff;
  padding: 10px; }

.login {
  width: 400px;
  margin: 0 auto; }

.login-title {
  font-size: 22px;
  margin-bottom: 20px; }

.login-label {
  font-size: 14px;
  display: block;
  margin-bottom: 10px; }

.login-field {
  width: 100%;
  border: 1px solid #e3e3e3;
  height: 40px;
  font-size: 14px;
  outline: none;
  padding: 0 10px;
  display: block;
  margin-bottom: 20px; }

.error {
  color: #00917e;
  display: block;
  margin-bottom: 20px; }

.login-btn {
  float: right; }

.logout {
  color: #00917e;
  margin: 10px;
  float: right; }

.image-grid {
  display: flex;
  flex-wrap: wrap; }

.image-grid__content {
  width: calc(25% - (3 * 10px /4 ));
  padding: 10px 10px calc(40px + 2 * 20px);
  margin: 0 10px 10px 0; }
  .image-grid__content:nth-child(4n) {
    margin-right: 0; }

.image-grid__time {
  display: block;
  font-size: 12px;
  margin-bottom: 10px; }

.image-grid__image {
  max-height: 300px;
  display: block;
  margin: 0 auto 20px;
  border: 1px solid #e3e3e3; }

.image-grid__input {
  display: block;
  height: 30px;
  position: absolute;
  bottom: 60px;
  width: calc(100% - 2 * 10px);
  border: 1px solid #e3e3e3;
  padding: 0 10px;
  font-size: 12px; }

.image-grid__copy {
  position: absolute;
  bottom: 10px;
  right: 10px; }

.image-grid__removebutton {
  display: none; }

.no-js .image-grid__removebutton {
  display: block; }

.image-grid__delete {
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  left: 10px; }

.icon-trash {
  width: 25px;
  height: 25px; }

.icon-trash .trash-lid {
  width: 71%;
  height: 15%;
  left: 45%;
  margin-left: -30%;
  top: 6.5%;
  background-color: #000;
  border-top-left-radius: 40%;
  border-top-right-radius: 40%; }

.icon-trash .trash-lid:after {
  content: "";
  width: 26%;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -15%;
  margin-top: -10%;
  background-color: inherit; }

.icon-trash .trash-container {
  width: 56%;
  height: 65%;
  position: absolute;
  left: 50%;
  margin-left: -28%;
  bottom: 10%;
  background-color: #000;
  border-bottom-left-radius: 15%;
  border-bottom-right-radius: 15%; }

.upload-image {
  width: 60%;
  margin-bottom: 20px;
  display: flex; }

.upload-image-content {
  display: flex;
  width: 100%; }

.image-field {
  border: 1px solid #e3e3e3;
  height: 40px;
  margin-right: 10px;
  font-size: 14px;
  outline: none;
  flex-grow: 1;
  padding: 0 30px 0 10px; }

.image-error {
  margin-left: 10px; }

.search-image {
  width: 80%;
  margin-bottom: 40px;
  display: flex; }
  .search-image::after {
    clear: both;
    content: "";
    display: block; }

.image-actions {
  margin-bottom: 20px; }
  .image-actions::after {
    clear: both;
    content: "";
    display: block; }

.search-image-text {
  padding-left: 10px;
  margin-top: 10px;
  font-size: 14px;
  float: left; }

.download-button {
  float: right; }

.close {
  position: absolute;
  top: 11px;
  right: 10px;
  width: 32px;
  height: 32px;
  cursor: pointer; }
  .close::before, .close::after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 20px;
    width: 2px;
    background-color: #333; }
  .close::before {
    transform: rotate(45deg); }
  .close::after {
    transform: rotate(-45deg); }

.hidden {
  display: none; }

/*# sourceMappingURL=vaillant.css.map */