:root {
  --primary-color: 0, 63, 72;
  --secondary-color: 249, 240, 223;
  --box-border-radius: 0.75rem;
}

@font-face {
  font-family: "Work Sans";
  src: url(../font/WorkSans-VariableFont_wght.ttf);
  font-style: normal;
}
@font-face {
  font-family: "Work Sans";
  src: url(../font/WorkSans-Italic-VariableFont_wght.ttf);
  font-style: italic;
}

body {
  margin: 0;
  font-family: "Work Sans", sans-serif;
  background: url("../images/VITREA_HG_SmartPhones_1440x3200px_01_Background.jpg") no-repeat scroll
      center center;
  -webkit-background-size: cover !important;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.3rem;
}

h3 {
  font-size: 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6{
  color: rgb(var(--primary-color));
}

a {
  color: rgb(var(--primary-color));
  text-decoration: none;
}

a:hover {
  color: rgba(var(--primary-color), .5);
  text-decoration: none;
}

.card {
  border: 1px solid rgb(var(--primary-color));
  background-color: rgb(var(--secondary-color));
}

.ches-container {
  border-radius: 1.5rem;
  background-color: rgb(var(--secondary-color));
  margin-top: 1rem;
  display: none;

}

.color-herausforderung {
  color: #ef5246;
}

/* Utility class for hiding elements with jquery in combination with bootstrap display classes */
.hidden {
  display: none !important;
}

/* Header */
.ches-header img {
  display: flex;
  max-height: 70px;
  padding-right: 7px;
  margin-left: auto;
}

/* Boxes */

.ches-row {
  margin-top: 5px;
  padding-left: 9px;
  padding-right: 9px;
}
.ches-institution-box {
  padding: 0 1 2 1;
}

.ches-institution-box-content {
  border-radius: var(--box-border-radius);
  border: 1px solid rgb(var(--primary-color));
  position: relative;
  margin: 4 4;
  padding: 0 0 4 0;
}

.ches-institution-box-content-overlay {
  border-radius: var(--box-border-radius);
  opacity: 0;
  position: absolute;
  background-color: rgba(var(--secondary-color), 0.85);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: opacity 0.5s;
  cursor: pointer;
}

.ches-institution-box-content-overlay:hover {
  opacity: 1;
}

.ches-institution-box-content-overlay-text {
  color: rgb(var(--primary-color));
}
.ches-institution-img {
  height: 210px;
}

.ches-institution-img img {
  border-radius: var(--box-border-radius) var(--box-border-radius) 0 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.ches-institution-logo {
  border-radius: 0 0 var(--box-border-radius) var(--box-border-radius);
  padding: 10px;
  background-color: rgb(var(--secondary-color));
  height: 68px;
}

.ches-institution-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* privacy-policy */
.ches-privacy-policy {
  display: none;
}

/* terms of use */
.ches-terms-of-use {
  display: none;
}

/* demo instances */
.ches-demo-instances {
  margin-top: 10px;
  border-top: 1px solid rgb(var(--primary-color));
  padding-top: 10px;
}

/* footer */

.ches-footer {
  border-top: 1px solid rgb(var(--primary-color));
  padding-bottom: 10px;
}

.ches-footer-item {
  padding: 10 5 0 0;
}

.ches-footer-space {
  width: 10px;
}

/* responsive */

@media (max-width: 992px) {
  .ches-header img {
    display: block;
    max-width: 90%;
    margin: 1rem auto 1rem;
  }
}

@media (max-width: 575px) {
  .ches-container {
    margin-top: 0;
    border-radius: 0;
    border: none;
  }

  .ches-row {
    padding-left: 5px;
    padding-right: 5px;
  }

  .ches-institution-box {
    padding: 0 5 5 5;
  }

  .ches-footer-item {
    padding: 5px;
  }
}