/*===========================================================================
C S S  definitons

look and feel of the website
change styles ONLY here, all CSS formatting code goes here, no seperate file
see http://www.w3schools.com/colors/default.asp for colors

Colors and design are defined by the Corporate-Design-Guidelines of for Helmholz:
https://www.helmholtz.de/fileadmin/user_upload/05_aktuelles/Marke_Design/HG_Corporate_Design_Guidelines_120801.pdf

TODO (erase task when done):
- clean
============================================================================ */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.flex-dummy {
  flex: 1;  
}
.HGFgreen{
        color: #8CB423;
        font-size:2.0em; 
        font-weight:bold; 
}
.HGFdarkblue{
        color: #0a2D6e;
        font-size:2.0em; 
        font-weight:bold; 
}
.HGFgrey{
        color: #5a696e;
        font-size:2.0em; 
        font-weight:bold; 
}
.bgcolor_HG-darkblue{
  background-color: rgba(10, 45, 110, 1) !important;
}
.bgcolor_VS-grey{
  background-color: rgba(72, 72, 72, 1) !important;
}
.border_VS-grey{
   border: 0.2em rgba(72, 72, 72, 1) solid;
}
.bgcolor_HG-dark-green{
  background-color: rgba(20, 77, 40, 1) !important;
}
.border_HG-dark-green{
  border: 0.2em rgba(20, 77, 40, 1) solid;
}
.bgcolor_HG-white{
  background-color: rgba(255, 255, 255, 1) !important;
}
.bgcolor_HG-blue{
  background-color: rgba(0, 90, 160, 1) !important;
}
.border_HG-blue{
   border: 0.2em rgba(0, 90, 160, 1) solid;
}
/* below orange is 'color-picked', which might differ from origin. */
.bgcolor_GE-orange{
  background-color: rgba(240, 133, 2, 1) !important;
}
/* below orange is 'color-picked', which might differ from origin. */
.border_GE-orange{
   border: 0.2em rgba(240, 133, 2, 1) solid;
}
/* extend max width for larg screens to display 'dashboard' */
@media only screen and (min-width : 1200px) {
  /* .container { width: 90%; max-width: 1900px; } */
  .container { max-width: 1300px; }
  /* if you want to extend products only try this: */
  /* .container-xl { max-width: 1500px; } */
  /* and change container of products accordingly */
}
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}
.TopOfPage {
  padding-top: 7em !important;
}
.BottomOfPage {
  margin-top: 1em !important;
}  
.container-header {
  padding-top: 2em;
}
.container-content {
  padding-top: 2em;
}
/*background: #144D28;*/
.bg-1 {
  background: #5a696e;
  color: white;
}
.bg-2 {
  background: #FFFFFF;
  color: #000000;
}
.bg-3 {
  background: #0055A3;
  color: #8EB22F;
}
.bg-4 {
  background: #0A2D6E;
  color: #FFFFFF;
}
/* Anchor for navaigation
Use an empty <span class='anchor' id='X'> element to navigate.
'transform' will place the ancor relativ to window top in case of 'jumping' (clicking a link) to this Anchor
*/
.anchor {
  position: absolute;
  transform: translateY(-6em);
}
.navbar {
  /* background-color: #144D28 !important; */
  border: 0;
  opacity:1.0;
}
/* Add a gray color to all navbar links */
/* .navbar li a, .navbar .navbar-brand { */
.navbar li a {
  /*color: #d5d5d5 !important;*/
  color: white !important;
  font-size: 1.1em;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
  color: #fff !important;
  background-color:#5a696e !important;
}
/* The active link is locked white           #196f3d  */
.navbar-nav li.active > a {
  color: #fff !important;
  background-color:#5a696e !important;
}
/* Remove border color from the collapsible button */
/* .navbar-default .navbar-toggle {
  border-color: transparent;
} */
/* style dropdown menue */
.navbar-nav .dropdown-menu {
  /* background-color: #144D28; */
}
hr {
  /* background-color: #144D28; */
  /* height: 0.1em; */
  /*border: 0;*/
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0em;
  margin-right: 0em
}
footer {
  /* background-color: #144D28; */
  /*color: #f5f5f5; */
  padding: 2em;
}
span.centerImage {
  text-align: center;
}
h2 {
  margin-bottom: 1em;
}

.read-more.read-more-inactive {
  display: none;
}
.read-more.read-more-active {
  display: inline;
}

.product_subheader{
  margin-top: 1em;
  font-size: 1.2em;
  font-weight: bold;
}
/*  .card {
border: 5px solid rgba(0, 100, 0, 1);
}*/
/* style accordion Produkte */
.card-header {
  /* background-color: rgba(20, 77, 40, 1); */
}
.card-header a{
  color: #FFF;
}
/*.card-header a:hover{
  text-shadow: black 0.3em 0.3em 0.3em;
}*/
/* navbar was shifting a bit sideways when opening the modal due to the scrollbar */
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
  padding-right: 15px;
}
#linkspecial {
  color: #5dade2;
}
#q_banner_container{
  background-color: #F08502;
  /* background-color: #B9B9B9; */
  padding: 10px;
  margin: 0px;
  bottom: 0px;
  position: fixed;
  width: 99.2%;
  margin: 0.4%;
  text-align: center;
  display: none;
  z-index: 1;
}
#q_banner_text{
  height: 100%;
}
/* Style the close button (span) */
#close{
  color: #FFFFFF;
  float: right;
  width: 15em;
  height: 4em;
}
#close:hover{
  background: #d77702;
  /* background: #8c8c8c; */
}
.crop-ibg3-EUimg-container{
  /* margin-top of container has to be equal to top-crop of img (below) */
  margin-top: -4%;
}
.crop-ibg3-EUimg{
  /* top crop of img has to be equal to margin-top of container (above) */
  clip-path: inset(4% 0 7% 0);
}

/*FeedbackKontakt -- Shadow*/
.silver_shadow{
  box-shadow: 10px 10px 15px silver;
  border: 1px solid silver;
}
.bborder{
  border: 1px solid #000;
}
.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

/* Carousel base class */
.carousel-main {
  margin-bottom: 0rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-main-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-main-item {
  height: 32rem;
}
.carousel-main-item > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 32rem;
  object-fit: cover;
  overflow: hidden;
}

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-main-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
}

.thumb-post img {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 250px;
  margin-bottom: 1rem;
}
/* .thumb-post-entry img {
  object-fit: none;
  object-position: center;
  width: 100%;
  max-height: 400px;
  margin-bottom: 1rem;
} 
.thumb-post-entry img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 300px;
  overflow: hidden;
}*/
.thumb-post-entry img {
  object-fit: cover;
  width: 100%;
  height: 300px;
}
.logosize img {
  height: 80px;
  margin: 2em 2em 2em 2em;
}

.carousel-caption-BgWillkommen{
  background-color: rgba(83, 91, 106, 0.65);
  border-radius: 25px;
  padding: 1em;
}
.carousel-caption-BgPraxispartner{
  background-color: rgba(186, 151, 94, 0.65);
  border-radius: 25px;
  padding: 1em;
}
.carousel-caption-BgSupercomputing{
  background-color: rgba(171, 176, 187, 0.65);
  border-radius: 25px;
  padding: 1em;
}
.carousel-caption-BgWissenstransfer{
  background-color: rgba(135, 157, 170, 0.65);
  border-radius: 25px;
  padding: 1em;
}
.carousel-caption-BgDatenprodukte{
  background-color: rgba(201, 145, 54, 0.65);
  border-radius: 25px;
  padding: 1em;
}

.a-tooltip {
  font-style: italic;
  color: #949494;
}
.a-tooltip:hover {
  color: #7a7a7a;
}

.clip-circle {
  clip-path: circle(85px at center);
}

/*display some img only 80% but make them full with in case a small device is used*/
@media only screen and (max-width: 400px) { 
  .testclass-img-size { 
    width: 100%;
  } 
}