.Wyf {
  width: 24rem;
  height: 24rem; }
  .Wyf .images-conainer {
    overflow: hidden;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    position: relative; }
    .Wyf .images-conainer .touch-blocker {
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 1;
      opacity: 0; }
    .Wyf .images-conainer .Wyf__frame {
      width: 100%;
      height: 100%; }

.ImprintView {
  background: var(--color-white); }

.PrivacyView {
  background: var(--color-white); }
  .PrivacyView ul {
    list-style: none; }

.TermsView {
  background: var(--color-white); }

.Button_container {
  width: auto;
  height: auto;
  height: 3.875em;
  width: 14em;
  box-sizing: border-box; }
  .Button_container.block {
    height: 2.75em !important;
    width: 100%;
    font-size: 2rem !important; }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .Button_container.android, .Button_container.ios {
      height: 3em;
      width: 12em;
      font-size: 1.2em; } }
  .Button_container > a {
    text-decoration: none;
    height: 100%;
    width: 100%; }

.Button {
  height: 100%;
  width: 100%;
  border-radius: 3.875em;
  background: var(--color-black);
  color: var(--color-white);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-style: italic;
  user-select: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .2s ease;
  background: var(--color-black);
  font-size: 1.2em; }
  .Button:hover {
    background: var(--color-link-blue); }
  .Button img {
    filter: none;
    object-fit: contain;
    width: 2em; }
  .Button .menu-icon-container {
    height: 44px;
    width: 44px;
    margin-right: 1rem; }
  .Button.purple {
    background: var(--color-link-blue); }
  .Button.feedback {
    background: linear-gradient(45deg, #FCD379, #F952D7); }
  .Button.tap-to-play {
    font-size: 1.25rem;
    height: 3em;
    width: 10em;
    text-transform: uppercase; }
  .Button.white-app {
    background: var(--color-white);
    color: var(--color-black); }
  .Button .button-icon {
    height: 50%;
    margin-right: 5%;
    width: 1em;
    display: flex;
    justify-content: center; }

.View.ErrorView .view-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 20vh; }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .View.ErrorView .view-container {
      flex-direction: column;
      height: 100%;
      padding: 0;
      justify-content: center;
      padding: 70px 0; }
      .View.ErrorView .view-container .icon-container {
        margin-top: auto;
        transform: scaleX(-1); }
      .View.ErrorView .view-container .error-container {
        align-items: center;
        margin: 0;
        margin-top: auto; } }
  .View.ErrorView .view-container .icon-container {
    width: 256px;
    height: 256px;
    flex-shrink: 0; }
  .View.ErrorView .view-container .error-container {
    display: flex;
    flex-direction: column;
    margin-left: 2rem; }
    @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
      .View.ErrorView .view-container .error-container {
        margin-left: 0; } }
    .View.ErrorView .view-container .error-container h1 {
      font-size: 4rem;
      margin-top: 2rem;
      margin-bottom: 0; }
    .View.ErrorView .view-container .error-container p {
      font-size: 1.5rem;
      font-style: italic;
      margin-bottom: 4rem; }

svg.logo {
  height: 3.5rem;
  max-height: 44px; }
  svg.logo g, svg.logo path {
    fill: var(--color-black); }

.Footer {
  width: 100%;
  height: 6.25rem;
  max-height: 98px;
  background: var(--color-white);
  padding: 0 3rem;
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  bottom: 0;
  opacity: 1; }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .Footer {
      display: none !important; } }
  .Footer .link {
    display: flex;
    align-items: center;
    white-space: nowrap; }
    @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
      .Footer .link {
        justify-content: space-between; }
        .Footer .link .Button {
          display: none; }
          .Footer .link .Button:first-of-type {
            display: flex; } }
    .Footer .link > span {
      color: var(--color-black);
      font-size: 2rem;
      font-weight: 900;
      font-style: italic;
      margin-right: 1.5rem; }
    .Footer .link .Button_container {
      margin-left: 12px; }

.footer-click-catcher {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1001;
  background: none;
  height: 6.25rem;
  max-height: 98px;
  width: 100%; }

.TeamView h3 {
  margin: 0;
  font-size: 2.6rem;
  font-style: italic;
  font-weight: 900;
  color: var(--color-black); }

.TeamView p {
  display: block;
  font-size: 1.4rem;
  font-style: normal;
  line-height: 20px; }
  .TeamView p span.emoji {
    font-family: inherit;
    font-size: 20px; }

.TeamView .team-video-container {
  position: relative;
  width: 100%; }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .TeamView .team-video-container {
      width: 100vw;
      margin-left: -2rem; } }
  .TeamView .team-video-container video.team-video {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative; }

.TeamView .Button_container {
  font-size: 1.25rem;
  margin-top: 8rem;
  margin-left: auto;
  margin-right: auto; }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .TeamView .Button_container {
      margin-top: 4rem; } }

.Product {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden; }
  .Product .product-image {
    height: 110%;
    width: 100%;
    object-fit: contain;
    background: var(--color-background-product); }
    @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
      .Product .product-image {
        height: 100%; } }

.Stream {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: var(--stream-border-radius);
  position: relative;
  flex-shrink: 0;
  overflow: hidden; }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .Stream {
      position: unset;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding: 6rem 0;
      box-sizing: border-box; }
      .Stream .overlay {
        display: none !important; } }
  .Stream:hover .overlay {
    display: flex; }
  .Stream .overlay {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    justify-content: center;
    align-items: center;
    z-index: 1;
    opacity: 0.9; }
    .Stream .overlay span {
      height: 2.125rem;
      width: auto;
      font-size: 1.125rem;
      font-weight: 800;
      color: var(--color-black);
      padding: 0 1.375rem;
      padding-top: 5px;
      background: var(--color-white);
      border-radius: 34px;
      box-sizing: border-box; }
  .Stream .swipable {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%; }

.StoryTitle {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  font-weight: 900;
  font-style: italic;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 50;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.4s ease; }
  .StoryTitle.bouncing {
    animation: story-title-bounce 3s ease infinite; }

@keyframes story-title-bounce {
  0% {
    transform: translateX(0); }
  7.5% {
    transform: translateX(-4%); }
  15% {
    transform: translateX(0); }
  22.5% {
    transform: translateX(-2%); }
  30% {
    transform: translateX(0); }
  37.5% {
    transform: translateX(-1%); }
  50% {
    transform: translateX(0); }
  100% {
    transform: translateX(0); } }
  .StoryTitle .StoryTitle__background {
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center center, top center; }
  .StoryTitle .copyright {
    width: 100%;
    text-align: right;
    margin-top: 4px;
    opacity: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem 1.5rem;
    box-sizing: border-box; }
    .StoryTitle .copyright span {
      opacity: 1;
      font-weight: 200; }

.StoryHeader {
  height: 40px;
  padding: 6px 8px;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  z-index: 900;
  color: var(--color-white); }
  .StoryHeader.dark {
    color: var(--color-black); }
    .StoryHeader.dark .StoryHeader__view-count, .StoryHeader.dark .StoryHeader__product-shop {
      color: #A0A0A0; }
  .StoryHeader .StoryHeader__avatar {
    display: inline-block;
    height: 29px;
    width: 29px;
    border-radius: 50%;
    margin-right: 8px; }
  .StoryHeader .StoryHeader__meta, .StoryHeader .StoryHeader__product {
    height: 100%;
    top: 0;
    display: inline-block;
    vertical-align: top; }
    .StoryHeader .StoryHeader__meta .StoryHeader__title, .StoryHeader .StoryHeader__meta .StoryHeader__product-title, .StoryHeader .StoryHeader__product .StoryHeader__title, .StoryHeader .StoryHeader__product .StoryHeader__product-title {
      margin: 0;
      font-weight: 900;
      font-size: 12px;
      font-style: italic; }
    .StoryHeader .StoryHeader__meta .StoryHeader__count, .StoryHeader .StoryHeader__meta .StoryHeader__product-shop, .StoryHeader .StoryHeader__product .StoryHeader__count, .StoryHeader .StoryHeader__product .StoryHeader__product-shop {
      font-weight: 700;
      font-style: italic; }
  .StoryHeader .StoryHeader__product {
    margin-left: 0; }
  .StoryHeader .StoryHeader__share-button, .StoryHeader .StoryHeader__buy-button {
    display: inline-block;
    height: 26px;
    width: 90px;
    color: var(--color-white);
    float: right;
    text-align: center;
    line-height: 26px;
    border-radius: 3px;
    font-style: italic;
    font-weight: 900;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    background: var(--color-link-blue); }

.StoryProgress {
  width: 100%;
  height: 1px;
  position: absolute;
  display: flex;
  z-index: 2;
  padding: 0 8px;
  box-sizing: border-box; }
  .StoryProgress.dark .StoryProgress__indicator,
  .StoryProgress.dark .StoryProgress__indicator.full,
  .StoryProgress.dark .StoryProgress__indicator.active .StoryProgress__sub-indicator {
    background: var(--color-black); }
  .StoryProgress .StoryProgress__indicator {
    width: 100%;
    height: 100%;
    background: var(--color-white);
    margin-right: 2px;
    opacity: 0.2; }
    .StoryProgress .StoryProgress__indicator.active {
      opacity: 1;
      background: none;
      display: flex; }
      .StoryProgress .StoryProgress__indicator.active .StoryProgress__sub-indicator {
        background: var(--color-white);
        opacity: 0.2;
        width: 100%;
        height: 100%; }
        .StoryProgress .StoryProgress__indicator.active .StoryProgress__sub-indicator.active {
          opacity: 1; }
    .StoryProgress .StoryProgress__indicator.full {
      opacity: 1;
      background: var(--color-white); }
    .StoryProgress .StoryProgress__indicator:last-child {
      margin-right: 0; }

.StoryCallToAction {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 990;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  pointer-events: all; }
  .StoryCallToAction .StoryCallToAction__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px; }
    .StoryCallToAction .StoryCallToAction__container .IconSequence {
      width: 92px;
      height: 92px; }
    .StoryCallToAction .StoryCallToAction__container h1 {
      color: #fff;
      margin: 0;
      width: 80%;
      text-align: center;
      margin-top: 0px;
      margin-bottom: 28px;
      font-size: 38px; }
    .StoryCallToAction .StoryCallToAction__container a {
      margin: 0 auto;
      width: 40%;
      text-align: center; }
      .StoryCallToAction .StoryCallToAction__container a svg {
        width: 100%;
        height: auto;
        margin: 4px auto; }

.StoryDot {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  pointer-events: none; }
  .StoryDot.large .StoryDot__dot {
    height: 14px;
    width: 14px; }
  .StoryDot.large .StoryDot__dot_background {
    height: 28px;
    width: 28px; }
  .StoryDot.dark .StoryDot__dot {
    background: #00b6ff; }
  .StoryDot.dark .StoryDot__dot_background {
    background: rgba(0, 182, 255, 0.2); }
  .StoryDot .StoryDot__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    animation-delay: .2s; }
  .StoryDot .StoryDot__dot_background {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    position: absolute;
    animation: dot-click-animation .8s ease infinite; }

@keyframes dot-click-animation {
  0% {
    opacity: .2;
    transform: scale(0); }
  40% {
    opacity: 1;
    transform: scale(1); }
  60% {
    opacity: .4;
    transform: scale(1.2); }
  100% {
    opacity: 0;
    transform: scale(0); } }

.SideClickOverlay {
  z-index: 10100;
  position: absolute;
  height: 100%;
  width: 100%;
  pointer-events: none;
  display: flex;
  justify-content: space-between; }
  @media only screen and (min-width: 769px), only screen and (min-width: 1024px) and (orientation: landscape) {
    .SideClickOverlay {
      display: none; } }
  .SideClickOverlay.embedded {
    display: flex !important; }
  .SideClickOverlay .side {
    pointer-events: all;
    width: 25%; }

.FooterNotice {
  margin: 2rem auto; }
  .FooterNotice p.FooterNotice__copyright {
    color: var(--color-black);
    margin: .25rem 0;
    font-style: normal;
    text-align: center;
    font-family: "Muli";
    white-space: nowrap;
    user-select: none;
    font-size: 1.1rem; }
    @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
      .FooterNotice p.FooterNotice__copyright {
        font-size: .8rem; } }
  .FooterNotice ul.FooterNotice__links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: .3rem 0;
    justify-content: center; }
    @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
      .FooterNotice ul.FooterNotice__links {
        font-size: .8rem; } }
    .FooterNotice ul.FooterNotice__links li::after {
      content: "-"; }
    .FooterNotice ul.FooterNotice__links li:last-child::after {
      content: ""; }
    .FooterNotice ul.FooterNotice__links li a {
      font-family: "Muli";
      text-decoration: none;
      font-style: italic;
      margin: 0 .5rem;
      color: var(--color-black); }
      .FooterNotice ul.FooterNotice__links li a:hover {
        color: var(--color-link-blue);
        text-decoration: underline; }

.DownloadFooter {
  width: 100%;
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 4rem;
  margin-bottom: 2rem; }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .DownloadFooter {
      max-width: unset;
      padding: 0 22.5%;
      box-sizing: border-box; } }
  .DownloadFooter h2 {
    font-weight: 900;
    font-style: italic;
    font-size: 2.8rem;
    color: var(--color-black);
    user-select: none;
    text-align: center;
    white-space: nowrap;
    margin: 3rem 0; }
  .DownloadFooter .DownloadFooter__button-container {
    display: flex;
    flex-direction: row; }
    @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
      .DownloadFooter .DownloadFooter__button-container {
        flex-direction: column; } }
    .DownloadFooter .DownloadFooter__button-container .Button_container {
      margin: .5rem 1rem;
      width: 16em;
      height: 4.8em; }
      .DownloadFooter .DownloadFooter__button-container .Button_container .Button {
        font-size: 1.6em; }

.HomeView {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-white); }
  .HomeView .Wyf {
    margin-top: auto; }
    @media only screen and (max-width: 640px) {
      .HomeView .Wyf {
        width: 60vw;
        height: 60vw;
        box-sizing: border-box; } }
  .HomeView .DownloadFooter {
    margin-top: 4rem;
    margin-bottom: auto; }
    @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
      .HomeView .DownloadFooter {
        margin-top: auto;
        margin-bottom: 2rem; } }

.SharingButton {
  height: 4.8rem;
  width: 100%;
  border-radius: 4px;
  margin-right: 4px;
  color: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  outline: none;
  text-decoration: none;
  font-family: "Muli";
  font-style: italic;
  font-weight: 700;
  font-size: 12px; }
  .SharingButton:hover {
    opacity: .8; }
  .SharingButton svg {
    margin-right: 12px; }
    .SharingButton svg path {
      fill: var(--color-white); }
  .SharingButton.more {
    background: var(--color-black); }
    .SharingButton.more svg {
      margin: 0; }
      .SharingButton.more svg path {
        fill: unset; }
  .SharingButton.facebook {
    background: #3A5A97; }
  .SharingButton.twitter {
    background: #1CA1F1; }
  .SharingButton.messenger {
    background: #0674F6; }
  .SharingButton.whatsapp {
    background: #46C054; }
  .SharingButton.mail {
    background: #DC4A3E; }
  .SharingButton.clipboard {
    background: #cdcdcd; }

.SharePopupMenu {
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  align-items: flex-end;
  pointer-events: all; }
  .SharePopupMenu .SharePopupMenu_container {
    background: var(--color-white);
    margin: 12px;
    border-radius: 4px;
    padding-left: 12px;
    padding-bottom: 12px;
    margin-bottom: 5.8rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box; }
    .SharePopupMenu .SharePopupMenu_container .SharingButton {
      height: 4.4rem;
      margin: 12px;
      margin-bottom: 0;
      margin-left: 0;
      flex-basis: 40%;
      margin-left: 0;
      flex-grow: 1; }

.SharePopupMenu_container {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  pointer-events: all; }

.Story {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box;
  margin-bottom: 100px;
  margin-top: auto;
  padding: 0 40px;
  align-items: center; }
  .Story.frozen .StoryHeader {
    top: 12px; }
  .Story .StoryHeader {
    top: 20px; }
  .Story .SideClickOverlay {
    padding: 64px 0;
    box-sizing: border-box; }
  .Story .StreamBrowser .view {
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    height: auto; }
  .Story .StoryProgress {
    top: 12px;
    z-index: 11; }
  .Story .StoryMobile__dot-container {
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    width: auto;
    position: absolute;
    right: 0;
    z-index: 10000;
    margin: 0 2rem; }
  .Story .browser {
    display: flex;
    overflow: auto;
    max-width: 1440px;
    width: auto; }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .Story {
      padding: 0;
      margin-bottom: 0; } }
  .Story .swipe {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    overflow-y: hidden; }
    .Story .swipe .react-swipeable-view-container {
      height: 100%; }
      .Story .swipe .react-swipeable-view-container .Stream {
        height: 100%; }
        .Story .swipe .react-swipeable-view-container .Stream .products {
          padding: 80px 20px;
          box-sizing: border-box; }
  .Story .SharePopupMenu {
    z-index: 1000000;
    align-items: flex-start; }
    .Story .SharePopupMenu .SharePopupMenu_container {
      margin-top: 64px; }

.Story__footer {
  z-index: 90;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 3rem 1.5rem;
  box-sizing: border-box;
  background: none; }
  .Story__footer.only-button {
    justify-content: center; }
    .Story__footer.only-button > h2 {
      display: none; }
    .Story__footer.only-button > .Button_container {
      width: 220px;
      font-size: 16px !important; }
  .Story__footer h2 {
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--color-white);
    width: 50%;
    margin: 0;
    font-style: italic;
    font-family: "Muli"; }
  .Story__footer > .Button_container {
    width: 180px;
    font-size: 16px !important; }

.StoryWidget {
  height: 548px;
  max-width: 560px;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  border: 1px solid rgba(183, 179, 190, 0.3);
  margin: 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  font-family: "Muli", sans-serif; }
  @media only screen and (min-width: 500px) {
    .StoryWidget {
      height: auto;
      max-width: 560px;
      border-radius: 5px; } }
  .StoryWidget .StoryProgress {
    top: 48px; }
    @media only screen and (min-width: 500px) {
      .StoryWidget .StoryProgress {
        top: calc(48px * 1.2);
        padding: 0 11px; } }
  .StoryWidget .Stream {
    height: 100%;
    width: 100%;
    padding: 5% 0;
    background: #F4F4F4;
    overflow: hidden;
    box-sizing: border-box; }
  .StoryWidget .SharePopupMenu {
    top: 0;
    left: 0;
    background: none;
    align-items: flex-start;
    margin-top: 40px; }
    @media only screen and (min-width: 500px) {
      .StoryWidget .SharePopupMenu {
        margin-top: 48px; } }
  .StoryWidget .StoryTitle__background {
    height: 110%; }
  .StoryWidget .StoryWidget__call-to-click-container {
    position: absolute;
    width: auto;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    display: flex;
    right: 0;
    justify-content: center;
    align-items: center; }
  .StoryWidget .StoryWidget__call-to-click {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 1rem;
    padding: 1rem;
    border-radius: 2px; }
    .StoryWidget .StoryWidget__call-to-click .StoryWidget__tap-text {
      color: var(--color-white);
      z-index: 1;
      font-family: "Muli";
      font-weight: 600;
      text-transform: uppercase;
      text-align: right;
      font-size: 12px;
      line-height: 14px;
      margin-right: 12px; }
      @media only screen and (min-width: 500px) {
        .StoryWidget .StoryWidget__call-to-click .StoryWidget__tap-text {
          font-size: 14px;
          line-height: 18px; } }
  .StoryWidget .StoryWidget__overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    display: flex; }
    .StoryWidget .StoryWidget__overlay.padded {
      padding: 0 8px;
      padding-bottom: 28px;
      padding-top: 48px; }
      @media only screen and (min-width: 500px) {
        .StoryWidget .StoryWidget__overlay.padded {
          padding-top: calc(48px * 1.2);
          padding-bottom: calc(28px * 1.2); } }
    .StoryWidget .StoryWidget__overlay .StoryWidget__embed-menu {
      background: #fff;
      width: 100%;
      border-radius: 4px;
      position: relative;
      box-sizing: border-box;
      flex-shrink: 0;
      padding: 8px; }
      @media only screen and (min-width: 500px) {
        .StoryWidget .StoryWidget__overlay .StoryWidget__embed-menu {
          padding: calc(8px * 1.2); } }
    .StoryWidget .StoryWidget__overlay .StoryWidget__embed-menu {
      margin-top: auto; }
      .StoryWidget .StoryWidget__overlay .StoryWidget__embed-menu .StoryWidget__embed-launch {
        text-align: center;
        width: 100%;
        display: block; }
      .StoryWidget .StoryWidget__overlay .StoryWidget__embed-menu .StoryWidget__embed-code {
        border: none;
        white-space: nowrap;
        resize: none;
        padding: 4px 4px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        overflow-x: scroll;
        overflow-y: hidden;
        width: 100%;
        box-sizing: border-box;
        padding-bottom: 20px; }
      .StoryWidget .StoryWidget__overlay .StoryWidget__embed-menu .StoryWidget__embed-legal {
        font-size: 8px;
        text-align: center;
        display: block;
        font-style: italic;
        color: #A0A0A0; }
        @media only screen and (min-width: 500px) {
          .StoryWidget .StoryWidget__overlay .StoryWidget__embed-menu .StoryWidget__embed-legal {
            font-size: calc(8px * 1.2); } }
  .StoryWidget .StoryHeader {
    height: 40px;
    padding: 6px 8px;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden; }
    @media only screen and (min-width: 500px) {
      .StoryWidget .StoryHeader {
        height: calc(40px * 1.2);
        padding: calc(6px * 1.2) calc(8px * 1.2); } }
    .StoryWidget .StoryHeader .StoryHeader__avatar {
      display: inline-block;
      height: 29px;
      width: 29px;
      border-radius: 50%;
      margin-right: 8px; }
      @media only screen and (min-width: 500px) {
        .StoryWidget .StoryHeader .StoryHeader__avatar {
          height: calc(29px * 1.2);
          width: calc(29px * 1.2); } }
    .StoryWidget .StoryHeader .StoryHeader__meta, .StoryWidget .StoryHeader .StoryHeader__product {
      height: 100%;
      top: 0;
      display: inline-block;
      vertical-align: top;
      line-height: 13px;
      padding: 1px 0;
      max-width: 50%;
      white-space: nowrap;
      overflow: hidden; }
      @media only screen and (min-width: 500px) {
        .StoryWidget .StoryHeader .StoryHeader__meta, .StoryWidget .StoryHeader .StoryHeader__product {
          max-width: 260px;
          line-height: 16px;
          padding: 1px 0; } }
      .StoryWidget .StoryHeader .StoryHeader__meta .StoryHeader__title, .StoryWidget .StoryHeader .StoryHeader__meta .StoryHeader__product-title, .StoryWidget .StoryHeader .StoryHeader__product .StoryHeader__title, .StoryWidget .StoryHeader .StoryHeader__product .StoryHeader__product-title {
        color: var(--color-black);
        margin: 0;
        font-weight: 900;
        font-size: 11px;
        font-style: italic; }
        @media only screen and (min-width: 500px) {
          .StoryWidget .StoryHeader .StoryHeader__meta .StoryHeader__title, .StoryWidget .StoryHeader .StoryHeader__meta .StoryHeader__product-title, .StoryWidget .StoryHeader .StoryHeader__product .StoryHeader__title, .StoryWidget .StoryHeader .StoryHeader__product .StoryHeader__product-title {
            font-size: 14px; } }
      .StoryWidget .StoryHeader .StoryHeader__meta .StoryHeader__count, .StoryWidget .StoryHeader .StoryHeader__meta .StoryHeader__product-shop, .StoryWidget .StoryHeader .StoryHeader__product .StoryHeader__count, .StoryWidget .StoryHeader .StoryHeader__product .StoryHeader__product-shop {
        font-weight: 700;
        color: #A0A0A0;
        font-style: italic;
        font-size: 9px; }
        @media only screen and (min-width: 500px) {
          .StoryWidget .StoryHeader .StoryHeader__meta .StoryHeader__count, .StoryWidget .StoryHeader .StoryHeader__meta .StoryHeader__product-shop, .StoryWidget .StoryHeader .StoryHeader__product .StoryHeader__count, .StoryWidget .StoryHeader .StoryHeader__product .StoryHeader__product-shop {
            font-size: 11px; } }
    .StoryWidget .StoryHeader .StoryHeader__product {
      margin-left: 0; }
  .StoryWidget .StoryWidget__view {
    height: 486px;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
    cursor: pointer; }
    @media only screen and (min-width: 500px) {
      .StoryWidget .StoryWidget__view {
        height: calc(486px * 1.2); } }
    .StoryWidget .StoryWidget__view .StoryWidget__swipe {
      height: 100%;
      background: var(--color-background-grey); }
      .StoryWidget .StoryWidget__view .StoryWidget__swipe .react-swipeable-view-container {
        height: 100%; }
  .StoryWidget .StoryWidget__footer {
    height: 22px;
    padding: 0 8px;
    line-height: 22px; }
    @media only screen and (min-width: 500px) {
      .StoryWidget .StoryWidget__footer {
        height: calc(22px * 1.2);
        line-height: calc(22px * 1.2);
        font-size: calc(10px * 1.2); } }
    .StoryWidget .StoryWidget__footer .StoryWidget__open-on-wysker, .StoryWidget .StoryWidget__footer .StoryWidget__embed {
      font-style: italic;
      font-weight: 700;
      cursor: pointer; }
    .StoryWidget .StoryWidget__footer .StoryWidget__open-on-wysker {
      text-decoration: none;
      color: var(--color-link-blue); }
    .StoryWidget .StoryWidget__footer .StoryWidget__embed {
      float: right; }

.StoryWidgetButton,
.StoryWidget .StoryHeader .StoryHeader__share-button,
.StoryWidget .StoryHeader .StoryHeader__buy-button {
  display: inline-block;
  height: 24px;
  width: 90px;
  color: var(--color-white);
  float: right;
  text-align: center;
  line-height: 24px;
  border-radius: 3px;
  font-style: italic;
  font-weight: 900;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  background: var(--color-link-blue);
  margin: 1px 0; }
  .StoryWidgetButton.block,
  .StoryWidget .StoryHeader .StoryHeader__share-button.block,
  .StoryWidget .StoryHeader .StoryHeader__buy-button.block {
    width: 100%; }
  @media only screen and (min-width: 500px) {
    .StoryWidgetButton,
    .StoryWidget .StoryHeader .StoryHeader__share-button,
    .StoryWidget .StoryHeader .StoryHeader__buy-button {
      height: calc(24px * 1.2);
      width: calc(90px * 1.2);
      line-height: calc(24px * 1.2);
      font-size: calc(12px * 1.2);
      margin: 2px 0; } }

.StoryView {
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  background: var(--color-background-grey); }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .StoryView {
      background: var(--color-background-product); } }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .StoryView .Menu {
      display: none; } }
  .StoryView .StoryWidget {
    margin-top: -6rem; }

.StoryWidgetView {
  box-sizing: border-box; }

.StoryWidgetDummy {
  height: 548px;
  max-width: 366px;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #B7B3BE;
  margin: 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  font-family: "Muli", sans-serif; }
  .StoryWidgetDummy .StoryWidgetDummy_header {
    background: #fff;
    height: 40px;
    padding: 6px 8px;
    position: relative;
    box-sizing: border-box;
    width: 100%; }
    .StoryWidgetDummy .StoryWidgetDummy_header .StoryWidgetDummy_header-profile {
      display: inline-block;
      height: 29px;
      width: 29px;
      border-radius: 50%;
      background: rgba(216, 216, 216, 0.5); }
    .StoryWidgetDummy .StoryWidgetDummy_header .StoryWidgetDummy_header-button {
      display: inline-block;
      height: 26px;
      width: 90px;
      color: var(--color-white);
      float: right;
      text-align: center;
      line-height: 26px;
      border-radius: 3px;
      font-style: italic;
      font-weight: 900;
      font-size: 12px;
      text-decoration: none;
      cursor: pointer;
      background: var(--color-link-blue); }
  .StoryWidgetDummy .StoryWidgetDummy_content {
    height: 486px;
    background: rgba(216, 216, 216, 0.5);
    text-align: center;
    padding-top: 200px;
    box-sizing: border-box; }
    .StoryWidgetDummy .StoryWidgetDummy_content h1 {
      color: #2E2345;
      margin: 0; }
    .StoryWidgetDummy .StoryWidgetDummy_content p {
      color: #2E2345; }
  .StoryWidgetDummy .StoryWidgetDummy_footer {
    background: #fff;
    color: #00B6FF;
    height: 22px;
    padding: 0 8px;
    line-height: 22px; }

.ShareMenu {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  z-index: 1002;
  pointer-events: none;
  position: relative; }
  .ShareMenu.twitter .SharePopupMenu .SharingButton.twitter {
    display: none; }
  .ShareMenu.facebook .SharePopupMenu .SharingButton.facebook {
    display: none; }
  .ShareMenu.whatsapp .SharePopupMenu .SharingButton.whatsapp {
    display: none; }
  .ShareMenu.messenger .SharePopupMenu .SharingButton.messenger {
    display: none; }
  .ShareMenu:not(.ShareFooter) .SharePopupMenu {
    background: none;
    height: auto;
    margin-top: 5.2rem;
    width: 234px;
    right: 0; }
    .ShareMenu:not(.ShareFooter) .SharePopupMenu .SharePopupMenu_container {
      flex-direction: column;
      padding: 12px;
      margin-top: 0;
      padding-top: 0;
      margin-right: -12px; }
      .ShareMenu:not(.ShareFooter) .SharePopupMenu .SharePopupMenu_container .SharePopupMenu_button {
        height: 4.8rem; }
  .ShareMenu .ShareMenu_button-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    pointer-events: all; }
  .ShareMenu .SharingButton {
    flex: 3; }
  .ShareMenu .SharingButton.more {
    flex: 2;
    margin-right: 0; }

.ShareFooter {
  position: fixed !important;
  height: 100%;
  bottom: 0;
  left: 0;
  display: none; }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .ShareFooter {
      display: flex;
      align-items: flex-end; } }
  .ShareFooter.ShareMenu .ShareMenu_button-container {
    height: initial;
    align-items: flex-end; }

.ArticleDate {
  color: var(--color-black);
  opacity: .5;
  font-size: 16px; }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .ArticleDate {
      font-size: 14px; } }

.TrendingStories > h4 {
  font-style: italic;
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--color-black);
  margin: 2rem 0;
  margin-top: 3rem; }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .TrendingStories > h4 {
      font-size: 2.4rem;
      padding: 0rem;
      margin: 1rem 0; } }

.TrendingStories .TrendingStories__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 0; }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .TrendingStories .TrendingStories__grid {
      padding: 1rem 0rem;
      margin-bottom: 40px; } }
  .TrendingStories .TrendingStories__grid .TrendingStory:nth-child(-n+6) {
    display: block; }
  @media only screen and (min-width: 769px), only screen and (min-width: 1024px) and (orientation: landscape) {
    .TrendingStories .TrendingStories__grid .TrendingStory:nth-child(-n+9) {
      display: block; } }
  .TrendingStories .TrendingStories__grid .TrendingStory {
    display: none;
    margin-bottom: 40px; }
    @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
      .TrendingStories .TrendingStories__grid .TrendingStory {
        margin-bottom: 20px; } }

.TrendingStory {
  flex-basis: 49%;
  color: var(--color-black);
  text-decoration: none;
  cursor: pointer; }
  @media only screen and (min-width: 769px), only screen and (min-width: 1024px) and (orientation: landscape) {
    .TrendingStory {
      flex-basis: 32%; } }
  .TrendingStory:hover > h5 {
    color: var(--color-link-blue); }
  .TrendingStory img.TrendingStory__cover {
    width: 100%;
    height: 110px;
    object-fit: cover; }
    @media only screen and (min-width: 769px), only screen and (min-width: 1024px) and (orientation: landscape) {
      .TrendingStory img.TrendingStory__cover {
        height: 140px; } }
  .TrendingStory > h5 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--color-black);
    font-style: normal;
    display: inline; }
  .TrendingStory > p {
    display: inline;
    font-size: 12px;
    color: var(--color-black);
    padding: 0;
    margin: 0; }
    @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
      .TrendingStory > p {
        display: none; } }

.ArticleMeta {
  display: flex; }
  .ArticleMeta .ArticleMeta__info {
    width: 100%;
    flex: 2; }
    .ArticleMeta .ArticleMeta__info .ArticleMeta__author {
      display: flex;
      margin: 2px 0; }
      .ArticleMeta .ArticleMeta__info .ArticleMeta__author .ArticleMeta__author-name {
        margin-left: 8px;
        font-weight: 800;
        font-style: italic;
        font-family: "Muli";
        font-size: 18px;
        line-height: 32px;
        vertical-align: middle; }
        @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
          .ArticleMeta .ArticleMeta__info .ArticleMeta__author .ArticleMeta__author-name {
            margin-left: 4px;
            font-size: 12px;
            line-height: 24px; } }
      .ArticleMeta .ArticleMeta__info .ArticleMeta__author .ArticleMeta__author-image {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--color-grey); }
        @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
          .ArticleMeta .ArticleMeta__info .ArticleMeta__author .ArticleMeta__author-image {
            width: 24px;
            height: 24px; } }
  .ArticleMeta .ArticleMeta__sharing {
    width: 100%;
    flex: 3; }
    @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
      .ArticleMeta .ArticleMeta__sharing {
        display: none; } }

.ArticleListView {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--color-white); }
  @media only screen and (min-width: 769px), only screen and (min-width: 1024px) and (orientation: landscape) {
    .ArticleListView .DownloadFooter {
      display: none; } }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .ArticleListView .TrendingStories {
      display: none; } }
  .ArticleListView .article-list-wrapper {
    justify-content: space-between;
    display: flex; }
    .ArticleListView .article-list-wrapper .article-list-container {
      display: flex;
      flex-direction: column;
      width: 70%;
      box-sizing: border-box; }
      @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
        .ArticleListView .article-list-wrapper .article-list-container {
          width: 100%; } }
    .ArticleListView .article-list-wrapper .article-banner {
      margin: 1rem 0;
      width: auto;
      height: 520px;
      background: var(--color-light-grey); }
      @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
        .ArticleListView .article-list-wrapper .article-banner {
          display: none; } }
  .ArticleListView .article-list-story {
    width: 100%;
    flex-direction: column;
    height: auto;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-black); }
    @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
      .ArticleListView .article-list-story {
        margin: 0;
        border: none; } }
    .ArticleListView .article-list-story:hover .article-list-item-info h3 {
      color: var(--color-link-blue); }
    .ArticleListView .article-list-story .article-list-item-cover {
      height: 32rem;
      width: 100%; }
      @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
        .ArticleListView .article-list-story .article-list-item-cover {
          height: 18rem; } }
      .ArticleListView .article-list-story .article-list-item-cover img {
        height: 100%;
        width: 100%;
        object-fit: cover; }
    .ArticleListView .article-list-story .article-list-item-info {
      display: block;
      max-height: unset;
      padding-left: 0;
      border-top: none;
      border-bottom: none;
      padding: 3rem 0; }
      @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
        .ArticleListView .article-list-story .article-list-item-info {
          padding: 2rem 2rem; }
          .ArticleListView .article-list-story .article-list-item-info .ArticleDate {
            display: block; } }
      .ArticleListView .article-list-story .article-list-item-info h3 {
        font-size: 4rem;
        margin: 0;
        margin-bottom: 4px;
        font-style: italic;
        font-weight: 900;
        color: var(--color-black); }
        @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
          .ArticleListView .article-list-story .article-list-item-info h3 {
            font-size: 2.6rem; } }
      .ArticleListView .article-list-story .article-list-item-info p {
        display: block;
        font-size: 1.8rem;
        font-style: normal;
        margin: 3rem 0; }
        @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
          .ArticleListView .article-list-story .article-list-item-info p {
            font-size: 1.4rem; } }
      .ArticleListView .article-list-story .article-list-item-info .article-list-item-meta {
        display: flex; }
  .ArticleListView .article-list-item {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-black);
    margin: 1rem 0; }
    .ArticleListView .article-list-item:hover .article-list-item-info h3, .ArticleListView .article-list-item:hover .article-list-item-info p {
      color: var(--color-link-blue); }
    @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
      .ArticleListView .article-list-item {
        margin: 0;
        border-top: 1px solid var(--color-light-grey);
        border-bottom: 1px solid var(--color-light-grey); } }
    .ArticleListView .article-list-item .article-list-item-cover {
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      width: 160px;
      height: 100px; }
      .ArticleListView .article-list-item .article-list-item-cover img {
        width: 100%;
        object-fit: cover; }
    .ArticleListView .article-list-item .article-list-item-info {
      max-height: 98px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding-left: 1rem; }
      @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
        .ArticleListView .article-list-item .article-list-item-info {
          padding-right: 1rem; }
          .ArticleListView .article-list-item .article-list-item-info .ArticleDate {
            display: none; } }
      .ArticleListView .article-list-item .article-list-item-info h3 {
        margin: 0;
        margin-bottom: 4px;
        font-size: 1.8rem;
        font-style: normal;
        font-weight: 900;
        color: var(--color-black); }
        @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
          .ArticleListView .article-list-item .article-list-item-info h3 {
            font-size: 1.6rem; } }
      .ArticleListView .article-list-item .article-list-item-info p {
        font-style: normal;
        margin: 4px 0;
        display: none; }

.ArticleView {
  background: var(--color-white);
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
    .ArticleView .FooterNotice {
      margin-bottom: 8rem; } }
  .ArticleView .ArticleMeta {
    padding: 3rem 0rem 4rem 0rem; }
    @media only screen and (max-width: 768px), only screen and (max-width: 1024px) and (orientation: portrait) {
      .ArticleView .ArticleMeta {
        padding: 3rem 0rem 4rem 0rem; } }
  .ArticleView .Menu {
    margin-bottom: 2rem; }
  .ArticleView .article-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 960px;
    box-sizing: border-box;
    padding: 0; }
    .ArticleView .article-container iframe {
      width: 100%;
      height: 570px;
      overflow: hidden;
      border: none;
      box-sizing: border-box;
      padding: 0; }
      @media only screen and (min-width: 500px) {
        .ArticleView .article-container iframe {
          height: calc(570px*1.2); } }
    .ArticleView .article-container h1, .ArticleView .article-container h2, .ArticleView .article-container h3, .ArticleView .article-container h4, .ArticleView .article-container p {
      font-style: normal; }
    .ArticleView .article-container h2 strong, .ArticleView .article-container h2 b, .ArticleView .article-container h3 strong, .ArticleView .article-container h3 b, .ArticleView .article-container h4 strong, .ArticleView .article-container h4 b {
      font-weight: 900; }
    .ArticleView .article-container h2 i, .ArticleView .article-container h2 cite, .ArticleView .article-container h2 em, .ArticleView .article-container h2 var, .ArticleView .article-container h2 address, .ArticleView .article-container h2 dfn, .ArticleView .article-container h3 i, .ArticleView .article-container h3 cite, .ArticleView .article-container h3 em, .ArticleView .article-container h3 var, .ArticleView .article-container h3 address, .ArticleView .article-container h3 dfn, .ArticleView .article-container h4 i, .ArticleView .article-container h4 cite, .ArticleView .article-container h4 em, .ArticleView .article-container h4 var, .ArticleView .article-container h4 address, .ArticleView .article-container h4 dfn {
      font-style: normal; }
    .ArticleView .article-container h1 {
      font-size: 3.6rem;
      margin: 0;
      font-style: italic; }
    .ArticleView .article-container h2 {
      margin: 0;
      font-size: 3rem;
      font-weight: 900;
      color: var(--color-black); }
    .ArticleView .article-container h3 {
      margin: 0;
      font-size: 2.4rem;
      font-weight: 900;
      color: var(--color-black); }
    .ArticleView .article-container h4 {
      margin: 0;
      font-size: 1.8rem;
      font-weight: 900;
      color: var(--color-black); }
    .ArticleView .article-container p {
      display: block;
      font-size: 1.4rem; }

.article-story {
  margin-top: 3rem; }
  .article-story h3::before {
    counter-increment: story;
    content: counter(story) ") "; }
  .article-story p {
    margin-top: .5rem; }