@import (less) "../variables.less";

:root {
  --headerDek-vertical-offset: 0px;
  --headerDek-horizontal-offset: 0px;
  --container-background-color: none;
  --side-by-side-text-color: black;
}

.topperContainerFullScreen {
  max-width: 100%;
  height: calc(100vh - 37px);
  position: relative;

  @media @tablet {
    height: auto;
  }
}

.topperContainerSlideshowFullScreen {
  max-width: 100%;
  position: relative;
  height: calc(100vh - 37px);

  @media @tablet {
    height: auto;
  }
}

.topperContainerSideBySide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--container-background-color);

  @media (max-width: @lg) {
    flex-direction: column;
  }
}

.topperContainerSideBySidePortrait {
  display: flex;
  align-items: center;
  max-width: @xl;
  margin: auto;
  margin-bottom: @s32;
  min-height: 600px;

  @media (max-width: @lg) {
    flex-direction: column;
    margin-bottom: 0;
  }
}

.fullWidthContainer {
  background: var(--container-background-color);
  width: 100%;
  padding-bottom: @s16;

  @media (max-width: @lg) {
    padding-bottom: 0px;
  }
}

.imageFullScreen {
  position: absolute;
  width: 100%;

  @media @tablet {
    margin: 0;
    padding: 0;
    height: 100%;
    position: static;
  }
}

.imageStacked {
  position: relative;
  max-width: @xl;

  @media @mobile {
    width: 100%;
  }
}

.imageSmallVisual {
  position: relative;
  max-width: var(--small-visual-max-width);
  height: auto;
  width: 100%;
  margin: @s24 auto 0 auto;

  @media (max-width: 960px) {
    margin-left: @s16;
    margin-right: @s16;
    width: auto;
    height: auto;
  }
}

.imageSmallVisualDatawrapper {
  position: relative;
  height: auto;
  width: 100%;
  margin: @s24 auto 0 auto;

  @media (max-width: 960px) {
    margin-left: @s16;
    margin-right: @s16;
    width: auto;
    height: auto;
  }
}

.imageSideBySide {
  width: 50%;
  float: left;
  padding: @s16;

  @media (max-width: @lg) {
    width: auto;
    float: none;
    padding-bottom: 0;
  }
}

.imageSideBySideDatawrapper {
  width: 50%;
  float: left;
  padding: @s16;

  @media (max-width: @lg) {
    width: 100%;
    float: none;
    padding-bottom: 0;
  }
}

.imageSideBySideSlideshow {
  width: 50%;
  height: calc(50vw*2/3 + 10px);

  @media (max-width: @lg) {
    width: 100%;
    height: calc(100vw*2/3 + 10px);
  }
}

.imageSideBySidePortrait {
  width: 50%;
  height: 90vh;
  min-height: calc(600px + 32px);
  float: left;
  padding: @s16;

  @media (max-width: @lg) {
    width: auto;
    float: none;
    height: auto;
    padding-bottom: 0;
    min-height: unset;
  }
}

.imageSideBySidePortraitDatawrapper {
  width: 50%;
  height: 90vh;
  min-height: calc(600px + 32px);
  float: left;
  padding: @s16;

  @media (max-width: @lg) {
    width: 100%;
    float: none;
    height: auto;
    padding-bottom: 0;
    min-height: unset;
  }
}

.imageSideBySidePortraitSlideshow {
  width: 50%;
  height: 90vh;
  min-height: calc(600px + 32px);
  float: left;
  padding: @s16;

  @media (max-width: @lg) {
    width: calc(90vh*2/3);
    float: none;
    height: calc(90vh);
    padding-bottom: 0;
    min-height: unset;
  }

  @media @mobile {
    width: 90vw;
    height: calc(90vw*3/2 + @s16);
    padding: 0;
  }
}

.headerDekStacked {
  margin-left: auto;
  margin-right: auto;

  @media (max-width: 960px) {
    margin-left: 0;
    margin-right: 0;
  }
}

.headerDekFullScreen {
  position: absolute;
  padding: @s24;
  width: @md;

  @media @tablet {
    width: @sm;
    position: static;
    transform: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }
}

.headerDekSideBySide {
  max-width: 50%;
  float: right;
  text-align: left;
  color: var(--side-by-side-text-color);

  @media (max-width: @lg) {
    width: auto;
    max-width: 100%;
    float: none;
    padding: 0;
  }
}

.hedFullScreen {
  margin-top: 0px;
}

.deckFullScreen {
  margin-bottom: 0px;
}

.headerDekTop {
  top: 0%;
  margin-top: var(--headerDek-vertical-offset);

  @media @tablet {
    margin-top: 0px;
  }
}

.headerDekBottom {
  bottom: 0%;
  margin-bottom: var(--headerDek-vertical-offset);

  @media @tablet {
    margin-bottom: 0px;
  }
}

.headerDekLeft {
  left: 0%;
  margin-left: var(--headerDek-horizontal-offset);

  @media @tablet {
    margin-left: 0px;
  }
}

.headerDekRight {
  right: 0%;
  margin-right: var(--headerDek-horizontal-offset);

  @media @tablet {
    margin-right: 0px;
  }
}

.headerDekCenterHorizontal {
  left: 50%;
  transform: translateX(-50%);
  margin-left: var(--headerDek-horizontal-offset);

  @media @tablet {
    transform: none;
    top: 0%;
    left: 0%;
    margin-left: 0px;
  }
}

.headerDekCenterVertical {
  top: 50%;
  transform: translateY(-50%);
  margin-top: var(--headerDek-vertical-offset);

  @media @tablet {
    transform: none;
    top: 0%;
    left: 0%;
    margin-top: 0px;
  }
}

.headerDekCenterCenter {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-left: var(--headerDek-horizontal-offset);
  margin-top: var(--headerDek-vertical-offset);

  @media @tablet {
    transform: none;
    top: 0%;
    left: 0%;
    margin-top: 0px;
    margin-left: 0px;
  }
}

.textAlignLeft {
  text-align: left;
}

.textAlignCenter {
  text-align: center;

  @media @tablet {
    text-align: left;
  }
}

.textAlignCenterKicker {
  text-align: center;

  @media (max-width: 960px) {
    text-align: left;
  }
}

.whiteTextBlackBg {
  color: @white;
  background-color: rgba(0, 0, 0, 0.54);

  @media @tablet {
    color: @black;
    background-color: transparent;
  }
}

.blackTextWhiteBg {
  color: @black;
  background-color: rgba(255, 255, 255, 0.54);
}

.blackTextNoBg {
  color: @black;
}

.whiteTextNoBg {
  color: @white;

  @media @tablet {
    color: @black;
  }
}

.dropshadow {
  text-shadow: 1px 1px 10px rgba(0, 0, 0, .4);

  @media @tablet {
    text-shadow: none;
  }
}

.hideWhenTablet {
  @media @tablet {
    display: none;
  }
}

.hideWhenDesktop {
  display: none;

  @media @tablet {
    display: block;
    padding-left: @s8;
  }
}

.smallPaddingLeft {
  padding-left: @s8;
}

.smallPaddingLeftWhenTablet {
  @media @tablet {
    padding-left: @s8;
  }
}

.slideshowCaptionSideBySide {
  padding-top: calc(50vw*2/3 - @s16);

  @media (max-width: @lg) {
    padding-top: calc(100vw*2/3 - @s16);
  }
}

.slideshowCaptionSideBySidePortrait {
  padding-top: clamp(584px, 88vh, 90vh);

  @media (max-width: @lg) {
    padding-top: calc(90vh - 37px - @s16);
  }

  @media @mobile {
    padding-top: calc(90vw*3/2);
  }
}

.captionSideBySide {
  max-width: @lg;
}

.captionSideBySidePortrait {
  width: clamp(0px, calc(50vw - 32px), calc(90vh * 2/3));
  max-width: calc(50vw * 2/3 - 32px);
  min-width: 400px;

  @media (max-width: @lg) {
    width: auto;
    max-width: none;
    min-width: 0px;
  }
}

.reverseFlexbox {
  flex-direction: row-reverse;

  @media (max-width: @lg) {
    flex-direction: column;
  }
}

.captionTextColor {
  color: var(--side-by-side-text-color);
}

.captionTextColorImportant {
  color: var(--side-by-side-text-color) !important;
}

.largePaddingLeft {
  padding: @s16 @s8 @s16 @s32;

  @media (max-width: @lg) {
    padding: 0;
  }
}

.largePaddingRight {
  padding: @s16 @s32 @s16 @s8;

  @media (max-width: @lg) {
    padding: 0;
  }
}

.xlargePaddingRight {
  padding: @s16 @s32 @s16 @s16;

  @media (max-width: @lg) {
    padding: 0;
  }
}

.captionLargePaddingLeft {
  padding-left: @s32;

  @media (max-width: @lg) {
    padding-left: @s16;
  }
}

.captionSmallPaddingLeft {
  padding-left: @s16;

  @media (max-width: @lg) {
    padding-left: @s16;
  }

  @media @mobile {
    padding-left: 0;
  }
}

.captionLargePaddingRight {
  padding-left: @s8;

  @media (max-width: @lg) {
    padding-left: @s16;
  }
}

.captionXLargePaddingRight {
  padding-left: @s16;

  @media (max-width: @lg) {
    padding-left: @s16;
  }
}

.captionSideBySidePortraitPadding {
  padding-left: clamp(0px, calc(50vw - (90vh * 2/3) - @s16), calc(600px - 90vh *2/3 + @s16));

  @media (max-width: @lg) {
    padding-left: @s16;
  }
}

.floatLeftWhenDesktop {
  float: left;

  @media (max-width: @lg) {
    float: none;
  }
}

.floatRightWhenDesktop {
  float: right;
  max-width: none;

  @media (max-width: @lg) {
    float: none;
  }
}

.videoStacked {
  width: 100%;
  object-fit: cover;
}

.videoFullscreen {
  width: 100%;
  height: calc(100vh - 37px);
  object-fit: cover;

  @media @tablet {
    height: 100%;
  }
}

.videoSideBySidePortrait {
  object-fit: cover;
  width: calc(90vh * 2/3);
  height: 100%;
  max-width: calc(50vw - @s32);
  min-width: 400px;
  min-height: 600px;

  @media (max-width: @lg) {
    width: 90vw;
    height: auto;
    max-width: unset;
    min-height: unset;
    min-width: unset;
  }
}

.kicker {
  margin: 0;
  margin-bottom: calc(-1*1rem);
  padding: 0;
  color: @brand !important;

  @media (max-width: 960px) {
    padding: 0 @s16;
    margin-top: @s8;
  }
}

.kickerSmallVisual {
  margin-top: 0.5rem;
}