html:not(.a11y):not(.no-js) * {
  outline: none; }

.page-item.-home {
  background: linear-gradient(180deg, #000D1E 0%, #072031 100%);
  z-index: 0;
  position: relative;
  overflow: hidden; }

.home-topics {
  position: relative;
  /* margin-top: 24rem; */
  /* padding-left: 5.5rem; */
  z-index: 1; }

.home-topics .youtube-player-wrapper {
  width: 100%; }

.topic-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.0833333333vw 1.0416666667vw; }

.webgl-topics {
  position: absolute;
  z-index: -1; }

.webgl-earth,
.webgl-topics {
  top: 0;
  left: 0;
  max-width: 100%;
  outline: none; }

.topic-list .youtube-player-wrapper {
  background-color: transparent;
  width: 100%;
  height: 18.0208333333vw; }

.topic-list .youtube-player-placeholder-wrapper {
  background-color: transparent; }

.topic-list .youtube-player-placeholder {
  z-index: 3; }

.topic-list .youtube-player-placeholder img {
  opacity: 0; }

.topic-item {
  cursor: pointer; }

.topic-item .tag {
  position: absolute;
  left: 1.5625vw;
  top: 1.0416666667vw;
  color: white;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.49);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  padding: 0.625vw 0.5208333333vw;
  width: fit-content;
  text-transform: capitalize;
  font-weight: 300; }

.topic-item .text {
  position: absolute;
  left: 0;
  bottom: 0;
  color: white;
  padding: 1.5625vw; }
  .topic-item .text .pt {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.4166666667vw; }
  .topic-item .text .des {
    line-height: 1.5;
    opacity: .7; }

.topic-item.-small .youtube-player-wrapper {
  width: 54rem; }

.topic-item.-small .youtube-player-wrapper .title {
  top: 3.5rem;
  right: 6rem;
  font-size: 3rem;
  line-height: 3.5rem; }

.topic-item.-small .youtube-player-wrapper .title .topic-title {
  display: block;
  display: -webkit-box;
  max-height: 10.5rem;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; }

.topic-item.-small .youtube-player-wrapper .topic-subtitle {
  font-size: 1.5rem; }

.topic-item.-small .youtube-player-wrapper .btn-play {
  width: 8rem;
  height: 8rem; }

@media (max-width: 767px) {
  .topic-item.-small .youtube-player-wrapper .title,
  .topic-item.-small .youtube-player-wrapper .topic-metas,
  .topic-item.-small .youtube-player-wrapper .topic-subtitle {
    left: 3rem;
    right: 5rem; }

  .topic-item.-small .youtube-player-wrapper .title {
    top: 2rem; }

  .topic-item.-small .youtube-player-wrapper .topic-metas {
    right: 10rem; }

  .topic-item.-small .youtube-player-wrapper .btn-play {
    right: 1rem;
    bottom: 1rem;
    width: 7rem;
    height: 7rem; }

  .topic-item.-small .youtube-player-wrapper .btn-play svg {
    width: 20%;
    height: auto;
    margin-left: 10%; } }
@media (max-width: 639px) {
  .topic-item.-small .youtube-player-wrapper .title,
  .topic-item.-small .youtube-player-wrapper .topic-metas,
  .topic-item.-small .youtube-player-wrapper .topic-subtitle {
    left: clamp(1rem, 5vw, 3.2rem);
    right: clamp(1rem, 5vw, 3.2rem); }

  .topic-item.-small .youtube-player-wrapper .title {
    top: clamp(1rem, 5vw, 3.2rem);
    font-size: clamp(1.6rem, 4.6875vw, 3rem);
    line-height: clamp(1.9rem, 5.46875vw, 3.5rem); }

  .topic-item.-small .youtube-player-wrapper .topic-subtitle {
    font-size: clamp(1.2rem, 2.34375vw, 1.5rem); }

  .topic-item.-small .youtube-player-wrapper .topic-metas {
    right: 6rem;
    bottom: clamp(1rem, 5vw, 3.2rem);
    font-size: clamp(0.9rem, 1.875vw, 1.2rem);
    line-height: 1.6; }

  .topic-item.-small .youtube-player-wrapper .btn-play {
    width: 5rem;
    height: 5rem; } }
 /* [data-component=LazyImage][data-bkg-desktop],
[data-component=LazyImage] [data-bkg-desktop] {
    transition: opacity .2s linear
} */
 /* [data-component=LazyImage][data-bkg-desktop]:not(.loaded),
[data-component=LazyImage] [data-bkg-desktop]:not(.loaded) {
    opacity: 0 !important
} */
 /* .youtube-player-wrapper {
    background-color: #000;
    overflow: hidden
} */
.youtube-player-wrapper:before {
  padding-bottom: 56.25%; }

.youtube-player-wrapper .youtube-player iframe {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0; }

 /* .youtube-player-wrapper .youtube-player-placeholder-wrapper {
    cursor: pointer;
    background-color: #000
} */
.youtube-player-wrapper .youtube-player-placeholder-wrapper.youtube-player-placeholder-wrapper--blured .youtube-player-placeholder {
  transform: scale(1.05);
  filter: blur(5px);
  opacity: 0.8; }

.youtube-player-wrapper .youtube-player-placeholder-wrapper.hide {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s linear 0s, visibility 0s linear 0.2s; }

.youtube-player-wrapper .youtube-player-placeholder-wrapper .youtube-player-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.youtube-player-wrapper .ambassador-title,
.youtube-player-wrapper .btn-play,
.youtube-player-wrapper .title,
.youtube-player-wrapper .topic-metas {
  position: absolute;
  left: 3.2rem;
  right: 13rem;
  z-index: 2; }

.youtube-player-wrapper .ambassador-title {
  bottom: 2.8rem;
  font-size: 1.5rem;
  line-height: 1.4666;
  transform-origin: bottom left; }

.youtube-player-wrapper .title {
  top: 4.5rem;
  font-size: 4rem;
  line-height: 1.125;
  transform-origin: bottom left; }

.youtube-player-wrapper .title span {
  width: 100%;
  display: inline-block; }

.youtube-player-wrapper .topic-metas {
  bottom: 2.8rem;
  transform-origin: bottom left; }

.youtube-player-wrapper .btn-play {
  left: auto;
  right: 2rem;
  bottom: 2rem;
  transform-origin: bottom right; }

.youtube-player-wrapper.bg-mode {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1; }

.youtube-player-wrapper.bg-mode .youtube-player {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  transition: opacity 0.5s ease; }

.youtube-player-wrapper.bg-mode .youtube-player iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.77vh;
  transform: translate(-50%, -50%);
  pointer-events: none; }

@media (max-width: 767px) {
  .youtube-player-wrapper .ambassador-title {
    font-size: 1.6rem;
    left: 3rem;
    right: 10rem;
    bottom: 1rem; }

  .youtube-player-wrapper .btn-play {
    right: 1rem;
    bottom: 1rem;
    width: 7rem;
    height: 7rem; }

  .youtube-player-wrapper .btn-play svg {
    width: 20%;
    height: auto;
    margin-left: 10%; } }
@media (max-width: 639px) {
  .youtube-player-wrapper .ambassador-title {
    left: clamp(1rem, 5vw, 3.2rem);
    right: 6rem;
    font-size: clamp(1.6rem, 4.6875vw, 2.2rem); }

  .youtube-player-wrapper .btn-play {
    width: 5rem;
    height: 5rem; } }
.ratio-wrapper {
  position: relative; }

.ratio-wrapper:before {
  content: "";
  display: block; }

.ratio-wrapper.-square:before {
  padding-bottom: 100%; }

.full {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0; }

@media screen and (max-width: 768px) {
  .topic-list {
    display: block; }

  .topic-list .youtube-player-wrapper {
    height: 250px; }

  .topic-item {
    margin-bottom: 20px; }

  .topic-item .tag {
    left: 15px;
    top: 10px;
    padding: 6px 5px; }

  .topic-item .text {
    padding: 15px;
    width: 100%; }
    .topic-item .text .pt {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin-bottom: 4px; }
    .topic-item .text .des {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden; } }

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