@font-face {
  font-family: "IBM_Plex";
  src: url("../../fonts/IBMPlexSans-Regular-V01.1.ttf");
}
@font-face {
  font-family: "IBM_Plex_Bold";
  src: url("../../fonts/IBMPlexSans-SemiBold-V01.1.ttf");
}
@font-face {
  font-family: "IBM_Plex_Light";
  src: url("../../fonts/IBMPlexSans-ExtraLight-V01.1.ttf");
}
body {
  font-family: IBM_Plex;
  width: 100%;
  height: 100%;
  top: 0%;
  position: absolute;
  font-size: 0.16em;
}

b {
  font-family: IBM_Plex_Bold;
}

#awards {
  position: absolute;
  bottom: 41%;
  right: 0;
  transform: translateY(50%);
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  height: calc(100% - 18.5em);
  width: 30%;
  max-height: 24em;
  transition: opacity 0.5s ease;
}
#awards.hide {
  opacity: 0;
}
#awards img {
  height: 100%;
}

#titles {
  position: relative;
  display: flex;
  background-color: black;
  border-bottom: 0.26em solid #8C8A8A;
  height: 5.5em;
  z-index: 2;
  font-size: 0.7em;
  color: white;
  text-align: left;
  right: unset;
  bottom: unset;
}
#titles.hide {
  opacity: 1;
}

#titles div.mainTitle {
  font-size: 1.5em;
  line-height: 4em;
  padding-left: 1em;
  display: flex;
}

#titles div.backButton {
  display: inline-block;
  color: white;
  cursor: pointer;
  box-sizing: border-box;
  height: 100%;
  line-height: 2em;
  font-size: 2.8em;
  padding-left: 0.4em;
  font-family: Cupertino;
  vertical-align: top;
  border-right: 2px solid grey;
  padding-right: 0.4em;
}
#titles div.backButton:hover {
  color: #8C8A8A;
  border-right: solid 2px #005EFF;
}

#sidecar {
  z-index: 10;
}

.configurator_btn {
  padding: 0.8em;
  font-size: 1.3em;
  position: absolute;
  background-color: #005EFF;
  right: 13.4em;
  width: 9.4em;
  top: 0.7em;
  background-position-y: center;
  background-repeat: no-repeat;
  background-position-x: 93.8%;
  background-size: 1.5em;
  cursor: pointer;
  background-position-y: center;
}
.configurator_btn:hover {
  background-color: #4589ff;
}

.learn_more {
  padding: 0.8em;
  font-size: 1.3em;
  position: absolute;
  background-color: #005EFF;
  right: 1.2em;
  width: 9.4em;
  top: 0.7em;
  background-position-y: center;
  background-image: url(../icons/specs.svg);
  background-repeat: no-repeat;
  background-position-x: 93.8%;
  background-size: 1.5em;
  cursor: pointer;
  background-position-y: center;
}
.learn_more.disabled {
  display: none;
}
.learn_more:hover {
  background-color: #4589ff;
}

#docsMenu {
  display: none;
  top: 0em;
  overflow-y: auto;
  font-family: "IBM_Plex";
}

#header #docsMenu > div {
  height: 2.2em;
  line-height: 2.2em !important;
  background-color: #005EFF !important;
  border-bottom: solid white 1px;
}

#header #docsMenu > div:hover {
  background-color: #333 !important;
}

.top_logo.ibm {
  height: 3.2em;
  background-image: url(../img/ibm.svg);
  background-repeat: no-repeat;
  background-size: 5em;
  background-color: white;
  background-position-x: 2em;
  background-position-y: center;
}

#privacy {
  bottom: 10px !important;
  right: 10px !important;
  left: unset !important;
}

#docs {
  display: none !important;
}

#headerRight {
  top: 2.3em;
  padding-right: 0.5em;
  justify-content: flex-end;
}

#header {
  position: relative;
  width: 100%;
  height: 2.6em;
  z-index: 4;
  -webkit-transform: translate3d(0, 0, 0);
  background-color: black;
  line-height: 1.7;
}

#features {
  font-family: "IBM_Plex_Light" !important;
}

.features {
  font-family: "IBM_Plex_Light" !important;
}

.featureItem {
  display: none;
}
.featureItem.active {
  display: block;
}

.featureHeading {
  display: none;
}

#infoText {
  height: 42vh;
  background-color: rgba(51, 51, 51, 0.65);
  font-size: 2.5vmin;
}

#closeInfo {
  border-radius: 5em;
  line-height: 1.2;
  bottom: 0.3em;
  right: 0.2em;
}

.infoItem {
  margin-top: 3.2em;
  max-width: 15vw;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.infoItem .infoIcon {
  margin-top: 2em;
  width: 2.4em;
  height: 2.4em;
  background-repeat: no-repeat;
  background-size: contain;
}
.infoItem .infoIcon.hotspot {
  background-image: url(../icons/hotspot_white.svg);
}
.infoItem .infoIcon.share {
  background-image: url(../icons/share_white.svg);
}
.infoItem .infoIcon.reset {
  background-image: url(../icons/reset_white.svg);
}
.infoItem .infoIcon.demo {
  background-image: url(../icons/loop_white.svg);
}
.infoItem .infoIcon.measure {
  background-image: url(../icons/measure_white.svg);
}

body #featureInner {
  display: none;
}

#infoText #featureInner {
  display: flex;
  justify-content: space-evenly;
  font-family: "IBM_Plex_Light";
}

.infoText {
  font-size: 0.7em;
}

.infoHeader {
  margin-top: 1em;
  font-family: "IBM_Plex";
  font-size: 0.8em;
}

.hotImg[data-hskind="0"] {
  background-image: url(../img/hotspot_blue.svg) !important;
  height: 2.3em !important;
  width: 2.3em !important;
}

.litImg[data-hskind="0"] {
  background-image: url(../img/hotspot_purple.svg) !important;
  height: 2.3em !important;
  width: 2.3em !important;
}

#hotText[data-hskind="0"] {
  border-top: solid 0.5em #8A3FFC;
  border-top-color: #8A3FFC !important;
}

#hotText[data-hskind="0"] #hotDismiss {
  background-color: #8A3FFC !important;
}

#hotText[data-hskind="0"] {
  border-top-color: #8A3FFC;
}

#hotDismiss {
  background-color: #8A3FFC;
}

#headerLeft > #features:not(.disabled):after {
  display: none;
}

#headerLeft .features {
  position: relative;
  width: 20em;
  font-size: 0.6em !important;
  vertical-align: top;
  padding-top: 0.7em !important;
  padding-right: 0.3em !important;
  padding-bottom: 0.7em !important;
  padding-left: 2.5em !important;
  color: white;
  border-right: solid 0.2em #8C8A8A;
  border-left: none;
  font-weight: bold;
  max-width: 20em;
  overflow: hidden;
  line-height: 1.32;
  font-family: Lepton;
  display: -webkit-inline-flex;
  display: inline-flex;
}
#headerLeft .features:hover {
  border-right: solid 0.2em #005EFF;
}
#headerLeft .features:active {
  border-right: solid 0.3em #005EFF;
}
#headerLeft .features.disabled .i18n {
  color: #8C8A8A !important;
}
#headerLeft .features.disabled:hover {
  border-right: solid 0.2em #8C8A8A;
}
#headerLeft .features.disabled:active {
  background-color: unset !important;
}

#featuresMenu.active {
  display: block !important;
  max-width: 20em;
  max-height: 70vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1;
}

#features {
  display: none !important;
}

#featuresMenu > div {
  background-image: none;
  font-family: "IBM_Plex_Light";
  width: 13.86em;
  white-space: unset !important;
}

#featuresMenu.benefits {
  left: 20em;
}

#featuresMenu.components {
  left: 40em;
}

#headerLeft > #features.active {
  background-size: 0 0, auto 2em;
  color: white;
  border-right: 0.3em #005EFF solid;
}

#smartdraw {
  display: none !important;
}

#headerRight > div.active {
  background-color: unset !important;
}

#headerRight #notes {
  background-image: url(../icons/hotspot_blue.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: 0em;
  height: 1em;
  margin-top: 0.85em;
  color: transparent;
}

#headerRight #autorun {
  background-image: url(../icons/loop.svg);
  background-repeat: no-repeat;
  background-size: 0.9em;
  background-position: center;
  width: 1.3em;
  margin-top: 0.85em;
  color: transparent;
}

#headerRight #share {
  background-image: url(../icons/share_icon.svg);
  background-repeat: no-repeat;
  background-size: 0.8em;
  background-position: center;
  width: 1.3em;
  margin-top: 0.85em;
  color: transparent;
}

#headerRight #reset {
  background-image: url(../icons/reset.svg);
  background-repeat: no-repeat;
  background-size: 0.8em;
  background-position: center;
  width: 1.3em;
  margin-top: 0.85em;
  color: transparent;
}

#headerRight #fullscreen {
  background-image: url(../../icon/expand.svg);
  background-repeat: no-repeat;
  background-size: 0.8em;
  background-position: center;
  width: 1.3em;
  margin-top: 0.85em;
  color: transparent;
}

#headerRight #info {
  background-image: url(../../icon/info.svg);
  background-repeat: no-repeat;
  background-size: 0.8em;
  background-position: center;
  width: 1.3em;
  margin-top: 0.85em;
  color: transparent;
}

#headerLeft div {
  color: white !important;
}

@media only screen and (max-width: 896px) {
  .learn_more {
    font-size: 0.85em;
    width: 7em;
    top: 50%;
    transform: translateY(-50%);
  }

  .configurator_btn {
    font-size: 0.85em;
    width: auto;
    right: 10em;
    top: 50%;
    transform: translateY(-50%);
  }

  #headerLeft .features {
    width: 11.4em;
  }

  #featuresMenu.benefits {
    left: 11.4em;
  }

  #featuresMenu.components {
    left: 22.8em;
  }

  #featuresMenu.active {
    max-height: 50vh !important;
  }

  #body {
    height: calc(100% - 1em);
  }
}
@media (min-width: 320px) {
  #featuresMenu.components {
    right: 0em;
    left: unset;
  }

  #body {
    height: calc(100% - 1em);
  }
}
@media (min-width: 481px) {
  #featuresMenu.components {
    left: 22.8em;
    right: unset;
  }

  #body {
    height: calc(100% - 1em);
  }
}
@media (min-width: 668px) {
  #featuresMenu.components {
    left: 22.8em;
    right: unset;
  }

  #body {
    height: calc(100% - 3.2em);
  }
}
@media (min-width: 960px) {
  #featuresMenu.components {
    left: 40em;
    right: unset;
  }
}
body.bodyVOSK.body1080x1920 #privacy {
  bottom: unset !important;
  top: 145px !important;
}
body.bodyVOSK.body1080x1920 #body {
  height: calc(1920px - 2.7em);
}
body.bodyVOSK.body1080x1920 #body #vrackbottom {
  position: fixed;
}
body.bodyVOSK.body1080x1920 #body #header {
  bottom: 0;
  top: unset;
  position: absolute;
}
body.bodyVOSK.body1080x1920 #body #header #headerRight {
  bottom: 2.3em;
  top: unset;
}
body.bodyVOSK.body1080x1920 #body #header #headerRight #notes {
  margin-top: 1.65em;
}
body.bodyVOSK.body1080x1920 #body #header #featuresMenu.active {
  max-height: 20vh !important;
}
body.bodyVOSK.body1080x1920 #body #header #infoText.showInfo {
  top: unset;
  bottom: 100%;
  height: calc(1920px - 100% - 2em);
}
body.bodyVOSK.body1080x1920 #body #header #infoText #version {
  left: 6px;
}
body.bodyVOSK.body1080x1920 #body #header #infoText #featureInner .infoItem:nth-child(2) {
  display: none;
}

body.bodyPhone #body #awards {
  bottom: 0;
  right: unset;
  transform: none;
  height: 20%;
  width: 50%;
  left: 0;
  margin: 7%;
}

/*# sourceMappingURL=ux.css.map */