.optimus-complex-front header {
  padding: 0 3% 0;
  margin: 0 -3%;
}

.themeBravo .optimus-complex-front header {
  padding: var(--brick-space-x4) var(--brick-space-x3);
  margin:0 0;
}

.optimus-complex-front header h2 {
  padding: 5px 10px;
  color: var(--swatchMono-black);
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  line-height: 18px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0;
}

.optimus-complex-front header h2.large {
  padding: 15px 10px 10px 10px;
  font-size: 35px;
  font-style: italic;
  letter-spacing: 0.07em;
  font-family: 'gsb', sans-serif;
}
.themeBravo .optimus-complex-front header h2 {
  padding:0;
  margin:0;
  text-align: left;
  text-transform: initial;
  font-family: var(--brick-fonts-grouptitleVerticalL);
  letter-spacing: var(--brick-letterSpacings-grouptitleVerticalL);
  font-size: var(--brick-fontSizes-grouptitleVerticalL);
  font-weight: var(--brick-fontWeights-grouptitleVerticalL);
  background-color: inherit;
  line-height: 18px;
  margin: 0;
}

.themeBravo .optimus-complex-front header h2.large {
 font-style: normal;
 font-family: var(--brick-fonts-grouptitleVerticalL);
 letter-spacing: var(--brick-letterSpacings-grouptitleVerticalL);
 font-size: var(--brick-fontSizes-grouptitleVerticalL);
 font-weight: var(--brick-fontWeights-grouptitleVerticalL);
}

@media screen and (min-width: 533px) and (max-width: 1000px) {
  .optimus-complex-front header h2 {
    padding: 0.5vw 1vw;
    font-size: 1.4vw;
    line-height: 1.8vw;
  }
  .optimus-complex-front header h2.large {
    padding: 0.5vw 1vw 0vw 0.5vw;
    font-size: 3.7vw;
    line-height: 4.2vw;
  }
  .themeBravo .optimus-complex-front header h2 {
    font-family: var(--brick-fonts-grouptitleVerticalL);
    letter-spacing: var(--brick-letterSpacings-grouptitleVerticalL);
    font-size: var(--brick-fontSizes-grouptitleVerticalL);
    font-weight: var(--brick-fontWeights-grouptitleVerticalL);
  }
  .themeBravo .optimus-complex-front header {
    padding: var(--brick-space-x4) var(--brick-space-x3);
    margin:0;
  }
}

@media screen and (max-width: 532px) {
  .optimus-complex-front header h2 {
    padding: 1vw 1vw;
    font-size: 2.8vw;
    line-height: 3.6vw;
  }
  .optimus-complex-front header h2.large {
    padding: 1.8vw 1vw 1vw 1vw;
    font-size: 4.8vw;
    line-height: 3.7vw;
  }
  .themeBravo .optimus-complex-front header h2,.themeBravo .optimus-complex-front header h2.large  {
    margin:0;
    padding:0;
    font-family: var(--brick-fonts-grouptitleVerticalM);
    letter-spacing: var(--brick-letterSpacings-grouptitleVerticalM);
    font-size: var(--brick-fontSizes-grouptitleVerticalM);
    font-weight: var(--brick-fontWeights-grouptitleVerticalM);
  }
  .themeBravo .optimus-complex-front header {
    padding: var(--brick-space-x4) var(--brick-space-none);
    margin:0;
  }
}

.optimus-complex-front .front {
  transform: scale(0.96);
}

@media screen and (max-width: 532px) {
  .optimus-complex-front .front {
    transform: scale(1);
  }

  .optimus-complex-front {
    box-sizing: border-box;
    margin-left: -3%;
    margin-right: -3%;
    padding: 0 3% 3%;
    margin-bottom: 4.8vw;
  }

  .optimus-complex-front.noHeader {
    padding-top: 3%;
  }

  .optimus-complex-front .front {
    margin-bottom: 0 !important;
  }

  .optimus-complex-front header {
    padding: 0 0 2%;
  }
  
  .themeBravo .optimus-complex-front {
    border-radius: var(--brick-radii-teaser);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.15);
  }
}

.themeBravo .optimus-complex-front {
  border-radius: var(--brick-radii-teaser);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.15);

}

/* So that groups will not disappear 
   when parallax is visible */
.optimus-complex-front {
  position: relative;
  z-index: 3;
}

.optimus-complex-front .teaser,
.optimus-complex-front a {
  color: inherit !important;
}
/*Temporary override of color on class "teaser" for bravoTheme in groups*/
.themeBravo .optimus-complex-front:not([class*='background']) .teaser{
  background-color: var(--brick-colors-teaserBg) !important;
  color: var(--brick-colors-teaserTitle) !important;
}

/* Groups without background in dr.edition get a light gray for display reasons,
   this ensures text color is always set to black at the same time. */
.optimus-complex-front:not([class*='background']) {
  background-color: var(--swatchMono-gray6);
  color: var(--swatchMono-black);
}
/* var(--brick-colors-teaserBg);*/

.themeBravo .optimus-complex-front:not([class*='background']){
  background-color: var(--brick-colors-teaserBg);
  color: var(--brick-colors-teaserTitle);
}

.optimus-complex-front
  .no-image:not(.with-background-color)
  .body:not([class*='background']) {
  background-color: rgba(255, 255, 255, 0.2);
  color: inherit;
}

.no-image:not(.with-background-color) .body:not([class*='background']) {
  background-color: var(--swatchMono-gray6);
  color: var(--swatchMono-black);
}

.optimus-background-black {
  background-color: var(--swatchMono-black);
  color: var(--swatchMono-white);
}
.optimus-background-black header h2 {
  color: var(--swatchMono-white);
}
.optimus-background-black .vignette {
  background-color: var(--swatchMono-black) !important;
}

.optimus-background-dark-gray {
  background-color: var(--swatchMono-gray2);
  color: var(--swatchMono-white);
}
.optimus-background-dark-gray header h2 {
  color: var(--swatchMono-white);
}

.optimus-background-gray {
  background-color: var(--swatchMono-gray6);
  color: var(--swatchMono-black);
}

.optimus-background-purple {
  background-color: var(--swatchHighlights-purple);
  color: var(--swatchMono-white);
}
.optimus-background-purple header h2 {
  color: var(--swatchMono-white);
}

.optimus-background-blue {
  background-color: var(--swatchHighlights-blue);
  color: var(--swatchMono-white);
}
.optimus-background-blue header h2 {
  color: var(--swatchMono-white);
}

.optimus-background-light-blue {
  background-color: var(--swatchHighlights-blueLight);
  color: var(--swatchMono-black);
}

.optimus-background-green {
  background-color: var(--swatchHighlights-green);
  color: var(--swatchMono-white);
}
.optimus-background-green header h2 {
  color: var(--swatchMono-white);
}

.optimus-background-light-green {
  background-color: var(--swatchHighlights-greenLight);
  color: var(--swatchMono-black);
}

.optimus-background-cinnamon {
  background-color: var(--swatchHighlights-cinnamon);
  color: var(--swatchMono-white);
}
.optimus-background-cinnamon header h2 {
  color: var(--swatchMono-white);
}

.optimus-background-gold {
  background-color: var(--swatchHighlights-gold);
  color: var(--swatchMono-black);
}

.optimus-background-yellow {
  background-color: var(--swatchHighlights-yellow);
  color: var(--swatchMono-black);
}

.optimus-background-dark-red {
  background-color: var(--swatchHighlights-redDark);
  color: var(--swatchMono-white);
}
.optimus-background-dark-red header h2 {
  color: var(--swatchMono-white);
}

.optimus-background-red {
  background-color: var(--swatchHighlights-red);
  color: var(--swatchMono-white);
}
.optimus-background-red header h2 {
  color: var(--swatchMono-white);
}

.optimus-background-light-red {
  background-color: var(--swatchHighlights-redLight);
  color: var(--swatchMono-black);
}

.optimus-background-finance {
  background-color: var(--swatchHighlights-finance);
  color: var(--swatchMono-black);
}

.optimus-background-brown {
  background-color: var(--swatchHighlights-brown);
  color: var(--swatchMono-white);
}
.optimus-background-brown header h2 {
  color: var(--swatchMono-white);
}

.optimus-complex-front.optimus-custom-one,
.themeBravo .optimus-complex-front.optimus-custom-one {
  background-color: var(--custom-background-color-one);
  color: var(--custom-background-color-one-front);
}
.optimus-custom-one header h2,
.themeBravo .optimus-custom-one header h2 {
  color: var(--custom-background-color-one-front);
}

.optimus-complex-front.optimus-custom-two,
.themeBravo .optimus-complex-front.optimus-custom-two {
  background-color: var(--custom-background-color-two);
  color: var(--custom-background-color-two-front);
}

.optimus-custom-two header h2,
.themeBravo .optimus-custom-two header h2 {
  color: var(--custom-background-color-two-front);
}

.optimus-complex-sonar {
  position: relative;
  width: 1em;
  height: 1em;
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 0.3em;
}

.optimus-complex-sonar:after,
.optimus-complex-sonar:before {
  color: var(--swatchHighlights-red);
  position: absolute;
  z-index: 2;
  display: block;
  line-height: inherit;
  border-radius: 100%;
  content: '';
  box-sizing: border-box;
}

.optimus-complex-sonar:before {
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  border: 0.15em solid var(--swatchHighlights-red);
  background-color: transparent;
  vertical-align: baseline;
  animation: optimus-pulse 1.5s 0.25s 3 cubic-bezier(0.6, 0, 0, 1);
}

.optimus-complex-sonar:after {
  width: 0.3em;
  height: 0.3em;
  left: 50%;
  top: 50%;
  background-color: red;
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  animation: optimus-pulse 1.5s 3 cubic-bezier(0.6, 0, 0, 1);
}