.subsection{
  width: var(--sectionScrollMaskWidth);
  height: auto;
  min-height: var(--singleUserWindowHeight);
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0px;
  margin: 0px;
  margin-top: calc(var(--spacerUnit) * 0.5);
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
}

.subsectionMenu{
  width: calc(var(--singleUserWindowWidth) - (var(--singleUserWindowBorderSize) * 2));
  height: var(--subsectionMenuHeight);
  position: absolute;
  top: 0px;
  left: 0px;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  border-bottom: var(--subsectionMenuBorderSize) solid var(--bmwi_blue_100);
  background-color: var(--bmwi_white_100);
  z-index : 70;
}

.subsectionMenuOptions{
  width: auto;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  padding: 0px;
  margin: 0px;
  margin-left: var(--subsectionMenuMarginLeft);
}

.subsectionMenuButton{
  width: auto;
  height: var(--menuLabelLineHeight);
  position: relative;
  padding: 0px;
  margin: 0px;
  margin-right: var(--subsectionMenuButtonMarginRight);
  margin-top: var(--subsectionMenuButtonMarginTop);
}

.subsectionMenuButton:hover{
  cursor: pointer;
}

h3.subsectionMenuTextSelected,
h3.subsectionMenuTextNotSelected{
  font-size: var(--menuLabelFontSize);
  line-height: var(--menuLabelLineHeight);
  padding: 0px;
  margin: 0px;
}

h3.subsectionMenuTextNotSelected{
  font-weight: normal;
  color: var(--bmwi_blue_60);
}

h3.subsectionMenuTextSelected{
  font-weight: bold;
  color: var(--bmwi_blue_100);
}

.subsectionIntro{
  width: var(--subsectionIntroWidth);
  height: -moz-fit-content;
  position: relative;
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--subsectionIntroMarginBottom);
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

h4.subsectionText{
  font-size: var(--mainFontSize);
  font-weight: normal;
  line-height: var(--mainLineHeight);
  padding: 0px;
  margin: 0px;
  color: var(--bmwi_blue_100);
}

.subsectionTextContainer{
  margin-bottom: var(--spacerUnit);
}

.subsectionStoryContainer{
  width: calc(var(--subsectionStoryWidth));
  height: auto;
  position: relative;
  padding: 0px;
  margin: 0px;
  margin-left: var(--subsectionMarginLeft);
  margin-bottom: var(--spacerUnit);
  display: flex;
  flex-flow: row wrap;
}

.leftAligned{
  justify-content: space-between;
}

.centerAligned{
  justify-content: center;
  left: 36px;
}


.interactiveGraphicContainer{
  padding: 0px;
  margin: 0px;
}

.interactiveGraphicText{
  width: var(--interactiveGraphicWidth);
  padding: 0px;
  margin: 0px;
}

.interactiveGraphic{
  width: var(--interactiveGraphicWidth);
  height: 555px;
  padding: 0px;
  margin: 0px;
}

.interactiveGraphicButton{
  width: calc(var(--interactiveGraphicButtonRadius) * 2);
  height: calc(var(--interactiveGraphicButtonRadius) * 2);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  margin: 0px;
  background-color: var(--bmwi_dark_blue_20);
  border-radius: var(--interactiveGraphicButtonRadius);
  border: var(--interactiveGraphicButtonStrokeSize) solid var(--bmwi_dark_blue_100);
  z-index: 80;
  animation-name: interactiveGraphicButtonAnimation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes interactiveGraphicButtonAnimation {
  0%{
    transform: scale(1.0);
    /* box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); */
  }
  25%{
    transform: scale(1.0);
    /* box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); */
  }
  50%{
    transform: scale(1.04);
    /* box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3); */
    box-shadow: 2px 2px 0px var(--bmwi_dark_blue_100);
  }
  75%{
    transform: scale(1.0);
    /* box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); */
  }
  100%{
    transform: scale(1.0);
    /* box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); */
  }
}

.interactiveGraphicButton:hover{
  cursor: pointer;
  transform: scale(1.04);
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
}

h4.interactiveGraphicButtonText{
  font-size: var(--buttonFontSize);
  line-height: var(--buttonFontSize);
  font-weight: bold;
  color: var(--bmwi_dark_blue_100);
}

.interactiveGraphicHiddenButton{
  position: absolute;
  padding: 0px;
  margin: 0px;
  z-index: 80;
}

.interactiveGraphicLabel{
  width: var(--interactiveGraphicHiddenButtonLabelWidth);
  height: var(--graphicLabelFontSize);
  position: absolute;
  display: flex;
  align-items: flex-start;
  padding: 0px;
  margin: 0px;
}

.interactiveGraphicLabel.leftLabel{
  justify-content: flex-start;
  transform-origin: left center;
  text-align: left;
}

.interactiveGraphicLabel.rightLabel{
  justify-content: flex-end;
  transform-origin: right center;
  text-align: right;
}

.interactiveGraphicLabel.centeredLabel{
  justify-content: center;
  transform-origin: center center;
  text-align: center;
}

h4.interactiveGraphicLabelText{
  font-size: var(--graphicLabelFontSize);
  line-height: var(--graphicLabelLineHeight);
  padding: 0;
  margin: 0;
}

h4.interactiveGraphicLabelText.blue{
  color: var(--bmwi_blue_100);
}

h4.interactiveGraphicLabelText.white{
  color: var(--bmwi_white_100);
}

.subSectionGoToMapStory {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.subSectionGoToMapImage {
    max-width: 350px;
    max-height: 350px;
    transform:translateY(-50px);
}

.subSectionGoToMapText {
    font-size: var(--turntableLabelFontSize);
    font-weight: bold;
    text-align: center;
    color: var(--bmwi_blue_100);
    font-family: 'BundesSansWeb', Verdana, Arial, Helvetica, sans-serif;
}

.subsectionSliderBig {
    --slider-margin-between-items: 0px;
    --slider-slide-width: 1215px;
    --slider-slide-height: 700px;
    --slider-slide-background-color: var(--bmwi_blue_40);
}

.subsectionSliderMedium {
    --slider-margin-between-items: 0px;
    --slider-slide-width: 910px;
    --slider-slide-height: 525px;
    --slider-slide-background-color: var(--bmwi_blue_40);
    margin-left: 265px;
}

.subsectionSliderSmall {
    --slider-margin-between-items: 0px;
    --slider-slide-width: 755px;
    --slider-slide-height: 436px;
    --slider-slide-background-color: var(--bmwi_blue_40);
}

.subsectionSliderLeftColumn .slider {
    width: var(--slider-slide-width);
    height: var(--slider-slide-height);
}

.subsectionSliderLeftColumn .sliderDots {
    --slider-dot-color: var(--bmwi_blue_100);
}

.subsectionSliderContent {
    display: flex;
    flex-direction: row;
}

.subsectionSliderContent .sliderText {
    color: var(--bmwi_blue_60);
    font-family: 'BundesSansWeb', Verdana, Arial, Helvetica, sans-serif;
    font-size: 24px;
    max-height: 700px;
    overflow-y: visible;
    display: none;
    margin-left: 25px;
    width: 350px;
    text-justify: auto;
    text-align: justify;
}

.subsectionSliderLeftColumn .sliderText {
    width: 755px;
    margin-top: 25px;
    margin-left: 0px;
}

.sliderText.selected {
    display: block;
}

.subsectionFoldableContainer {
    display: flex;
    flex-direction: column;
    margin-left: 190px;
}

.subsectionFoldable {
    display: flex;
    flex-direction: column;
    margin-bottom: 35px;
    cursor: pointer;
    user-select: none;
}

.subsectionFoldableTitleRow {
    display: flex;
    flex-direction: row;
}

.subsectionFoldableTitle {
    color: var(--bmwi_blue_80);
    font-family: 'BundesSansWeb', Verdana, Arial, Helvetica, sans-serif;
    font-size: var(--mainFontSize);
    font-weight: bold;
}

.subsectionFoldableShortText, .subsectionFoldableLongText {
    font-family: 'BundesSansWeb', Verdana, Arial, Helvetica, sans-serif;
    font-size: var(--mainFontSize);
    line-height: var(--mainLineHeight);
    margin-left: 45px;
    margin-top: 5px;
}

.subsectionFoldableShortText{
  color: var(--bmwi_blue_60);
}

.subsectionFoldableLongText {
  color: var(--bmwi_blue_100);
}

.foldableOpen .subsectionFoldableShortText {
    display: none;
}

.subsectionFoldableLongText {
    display: none;
}

.foldableOpen .subsectionFoldableLongText {
    display: block;
}

.subsectionFoldableTextArrow {
    width: 45px;
    height: 28px;
    fill: var(--bmwi_blue_60);
    transition: transform 0.2s ease;
}

.foldableOpen .subsectionFoldableTextArrow {
    transform: rotate(90deg);
}

.interactiveGraphicText .subsectionFoldableContainer {
    margin-left: 0px;
}