/* your styles go here */

/*
* ===================================================
*     Eventuell von hier Veloladen Custom Rules
* ===================================================
*/
.top-bar {
  color: #495057;
  background: #00ad26;
}

.navbar.fixed-top.bg-fixed-white {
  background: #00afaa !important;
}

.nav-pills .nav-link.active {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 100%;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
  color: #fff;
  background-color: #00AFAA;
}

/*Noch zu machen*/
.icon::after {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  .arrow::after {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
  }

.footer {
  background-color: #00ad26 !important;
}

li.a {
  color: #000;
  margin-bottom: 0.5rem;
  list-style-type: none;
}

.breadcrumb a {
  color: #fff;
}

.breadcrumb {
  font-size: 1rem;
}

.search-area {
  background-color: #DEE2E6;
}

a {
  color: #6F6F6F;
}

.breadcrumb a {
  color: #a800ad;
}

/*Marker*/
.hotspotcontainer {
  position: relative;
  margin: 0 auto;
}

.hotspotimage {
  display: block;
  width: 100%;
  height: auto;
}



.hotspoticon {
  color: white;
  font-size: 100px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}





#markerbild {
  display: inline-block;
  position: relative;
}

#markerbild > img {
  width: 100%;
  height: auto;
}

.markercontainer {
  width: 100%;
  margin: 0 auto;
}

#markerbild a {
  display: block;
  position: absolute;
}

.icon {
  position:absolute;
  top:0;
  right:0;
  z-index: 999;
}

/**
 * 1. Positions the image absolutely to its container.
 * 2. Sets the bounding box for the image.
 * 3. Centers the image in both directions.
 * 4. Make the container's aspect ratio 1:1 by default.
 * 5. Shrinks the image to fit its bounding box.
 */

.letterbox {
  position: relative; /* 1 */
  padding-top: 56.25%; /* 4 */
}

.letterbox > img {
  position: absolute; /* 1 */
  margin: auto; /* 3 */
  top: 0; /* 2 */
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 100%; /* 5 */
  max-height: 100%; /* 5 */
}

.Absolute-Center {
  display: flex; // make us of Flexbox
  align-items: center; // does vertically center the desired content
  justify-content: center; // horizontally centers single line items
  text-align: center; // optional, but helps horizontally center text that breaks into multiple lines
}
.fa option {

    font-weight: 900;
}

/*Bilder mit unterschiedlicher Ratio gleich anzeigen*/
.produktbild {
    width: auto;
    height: 12rem;
}

.produktbild img {
    max-width: 100%;
    max-height: 100%;
}

.produktbilddetail {
    width: auto;
    height: 25rem;
}

.produktbilddetail img {
    max-width: 100%;
    max-height: 100%;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }
 /* Center Awesome Icon */
.center-icon {
    margin-bottom: auto;
    margin-top: auto;
    text-align: center;
}

/* Custom Font */
h1, .h1 {
  margin-bottom: 0.5rem;
  font-family: 'Amatic', HK Grotesk, sans-serif;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

h1, .h1 {
  font-size: 5rem;
}

.detailimage {
  padding-right: 100px;
  padding-left: 100px;
}

.img-center {
max-width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}