@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap");
:root {
  --ff-regular: 'Work Sans', helvetica, sans-serif;
  --fs-regular: 0.9375rem;
  --fs-large: 1.125rem;
  --fs-h1: 2.25rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.125rem;
  --c-white: #fff;
  --c-dark: #1c1730;
  --c-light: #9191aa;
  --c-lighter: rgba(145,145,170,0.25);
  --c-disabled: #545454;
  --c-primary: #f78e61;
  --c-secondary: #f9a85f;
  --c-gradient: linear-gradient(45deg,var(--c-primary),var(--c-secondary));
  --c-gradient-transparent: linear-gradient(45deg,transparent,transparent);
  --c-error: #f76161;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --gutter-width: 1.875rem;
  --outer-margin: 1.875rem;
  --gutter-compensation: calc(var(--gutter-width)*0.5*-1);
  --half-gutter-width: calc(var(--gutter-width)*0.5);
  --container-width: 1194px;
  --vp-xs-max: 499px;
  --vp-sm-min: 500px;
  --vp-sm-max: 767px;
  --vp-md-min: 768px;
  --vp-md-max: 1023px;
  --vp-lg-min: 1024px; }

@media (max-width: 767px) {
  :root {
    --gutter-width: 9px;
    --outer-margin: 15px;
    --gutter-compensation: calc(var(--gutter-width)*0.5*-1);
    --half-gutter-width: calc(var(--gutter-width)*0.5);
    --fs-h1: 28px; } }

*, :after, :before {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  outline: 0; }

html {
  font-family: var(--ff-regular);
  -webkit-overflow-scrolling: touch; }

h1 {
  font-size: var(--fs-h1);
  line-height: 1.33; }

h1, h2, h3, h4 {
  font-weight: var(--fw-medium); }

.h1, h1 {
  font-size: 24px; }

.h1, .h2, h1, h2 {
  font-family: Open Sans,Helvetica,sans-serif;
  line-height: normal; }

.h2, h2 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 3rem; }

.h3, h3 {
  font-family: var(--ff-regular);
  font-size: 1em;
  line-height: 1.4em;
  margin-bottom: .2rem; }

@media (min-width: 1024px) {
  .h3, h3 {
    font-size: 1.3em; } }

.h4, h4 {
  margin-bottom: .45em; }

.h4, .h5, .h6, h4, h5, h6 {
  font-family: var(--ff-regular); }

body {
  width: 100%;
  position: relative;
  background-color: #fdfdfd;
  overflow-x: hidden;
  min-height: 100vh; }

.itemName {
  font-weight: bold; }

.colum {
  width: 20%;
  color: white; }

.header-background {
  position: relative;
  top: 0;
  height: 0;
  width: 100%;
  background: #1b182e;
  margin-bottom: -6.35rem;
  padding-top: 8.25rem; }
  @media (min-width: 1024px) {
    .header-background {
      margin-bottom: -7.85rem;
      padding-top: 11.25rem; } }

header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: #1b182e;
  height: 3.75rem;
  margin: 0;
  padding: 0;
  z-index: 2; }
  header .container {
    max-width: var(--container-width);
    text-align: left;
    margin: 0 auto;
    width: 100%;
    height: 3.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: var(--outer-margin);
    padding-left: var(--outer-margin); }
  header + * {
    margin-top: 2.55rem; }
  @media (min-width: 1024px) {
    header + * {
      margin-top: 4.05rem; } }
  header .top-left a {
    display: flex;
    align-items: center; }
  header .btn {
    display: inline-block; }

.tag-container {
  padding-left: 10px;
  font-size: 12px;
  color: white;
  margin-top: 12px; }

.logo {
  height: auto;
  width: 8rem; }

.hamburger {
  border: 0;
  padding: 1rem 0 1rem 1rem !important;
  margin: 0 !important;
  position: relative;
  z-index: 4; }
  .hamburger[aria-expanded="true"] .inner {
    height: 0; }
    .hamburger[aria-expanded="true"] .inner::before {
      transform: translate3d(0, 6px, 0) rotate(45deg);
      transition: opacity 150ms ease-out,transform 150ms ease-out; }
    .hamburger[aria-expanded="true"] .inner::after {
      transform: translate3d(0, -6px, 0) rotate(-45deg);
      transition: opacity 150ms ease-out,transform 150ms ease-out; }

.hamburger-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  transition: opacity .35s ease-out;
  background-color: rgba(28, 23, 48, 0.9);
  display: flex;
  justify-content: center;
  align-items: center; }
  .hamburger-menu ul {
    padding: 0; }
  .hamburger-menu li {
    text-align: center;
    list-style-type: none; }
  .hamburger-menu .btn {
    display: inline-block;
    min-width: 9.671875rem; }
  .hamburger-menu .outline-btn {
    color: var(--c-primary);
    margin-bottom: 1.875rem; }
    .hamburger-menu .outline-btn + .btn {
      margin-top: 0; }
  .hamburger-menu[aria-hidden="true"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; }

.box {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 14px; }
  .box .inner {
    position: absolute;
    width: 18px;
    height: 2px;
    background-color: #fff;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .1s ease-out; }
    .box .inner::before, .box .inner::after {
      display: block;
      content: "";
      position: absolute;
      width: 18px;
      height: 2px;
      background-color: #fff;
      transform-origin: center; }
    .box .inner::before {
      top: -6px;
      transition: top 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s, opacity 0.1s ease-out 0s, transform 0.1s ease-out 0s; }
    .box .inner::after {
      top: 6px;
      transition: top 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s, opacity 0.1s ease-out 0s, transform 0.1s ease-out 0s; }

.pagination {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 33%;
  min-width: 18rem;
  margin: 2rem auto 5rem;
  font-size: var(--fs-large); }
  .pagination .center {
    margin: 0 .5rem; }
  .pagination a, .pagination .center {
    font-weight: var(--fw-semi);
    color: var(--c-dark); }
  .pagination a {
    border-bottom: 1px solid var(--c-dark);
    line-height: 0.8em;
    display: inline-block; }

.left {
  text-align: left; }

.center {
  text-align: center; }

.detail img {
  width: auto;
  max-width: 100%;
  max-height: 100%; }

/* --------------------------------------------- */
::selection {
  background: #f78e61;
  color: #fff; }

::-moz-selection {
  background: #f78e61;
  color: #fff; }

body, html {
  letter-spacing: .01em;
  padding: 0;
  margin: 0; }

body {
  background-color: #fff; }

body.in-app {
  background-color: #2d2b47;
  color: var(--c-white); }

main {
  color: #1c1730;
  max-width: var(--container-width);
  margin-right: auto;
  margin-left: auto;
  min-height: calc(100vh - (180px + 490px) + 1px); }

.content__container {
  padding-right: var(--outer-margin);
  padding-left: var(--outer-margin);
  max-width: var(--container-width);
  margin-right: auto;
  margin-left: auto; }

.content__container_top {
  padding-top: calc(var(--outer-margin) * 2); }

.in-app main {
  background-color: #2d2b47;
  color: #fff; }

a {
  color: inherit;
  text-decoration: none; }

p {
  font-size: .85em;
  line-height: 1.7em; }

@media (min-width: 1024px) {
  p {
    font-size: 1em; } }

p:last-child {
  margin-bottom: 0; }

.text-center {
  text-align: center; }

.alert {
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .25rem; }

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb; }

.StripeElement {
  margin-bottom: .6rem;
  border-bottom: none;
  background: #221e38;
  padding: 1rem 1rem;
  border-radius: 4px;
  font-size: 1em; }

.InputElement, .StripeElement {
  color: #fff !important; }

.StripeElement--focus {
  color: #fff; }

.image-fluid {
  max-width: 100%;
  height: auto; }

.btn-txt  {
  font-family: var(--ff-regular);
  padding: 16px 37px;
  color: black;
  letter-spacing: .38px;
  border-radius: 3px;
  font-size: 15px;
  line-height: 15px;
  text-decoration: underline !important;
  font-weight: var(--fw-regular);
  background: none;
  outline: 0;
  cursor: pointer;;
}

.btn-txt:hover {
  font-weight: var(--fw-semi);
}

.btn {
  -webkit-appearance: none;
  font-family: var(--ff-regular);
  padding: 16px 37px;
  color: var(--c-white);
  letter-spacing: .38px;
  border-radius: 3px;
  font-size: 15px;
  line-height: 15px;
  font-weight: var(--fw-semi);
  background: none;
  outline: 0;
  cursor: pointer;
  text-transform: lowercase; }
  .btn:first-letter {
    text-transform: uppercase; }

.outline-btn {
  transition: border-color .2s ease-out;
  background-color: transparent;
  border: 2px solid var(--c-light);
  border-radius: 3px; }
  .outline-btn:hover {
    border-color: #fff; }

.fill-btn {
  background-image: var(--c-gradient);
  border: 2px solid transparent;
  transition: border-color .2s ease-out, color .2s ease-out; }
  .fill-btn:hover {
    color: var(--c-primary);
    background-image: none;
    border: 2px solid var(--c-primary); }

.navbar .btn {
  margin-left: .75rem;
  margin-right: .75rem; }

.navbar .outline-btn {
  border: 2px solid var(--c-primary); }

.navbar.full-height-buttons .top.right .holder {
  height: 100%;
  align-items: center; }
  @media (min-width: 1024px) {
    .navbar.full-height-buttons .top.right .holder {
      display: flex !important; } }
  .navbar.full-height-buttons .top.right .holder .btn {
    margin-left: .25rem;
    margin-right: .25rem; }
  .navbar.full-height-buttons .top.right .holder .outline-btn {
    border: 0; }
  .navbar.full-height-buttons .top.right .holder .fill-btn.btn {
    border-radius: 0;
    height: 3.75rem;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center; }
    .navbar.full-height-buttons .top.right .holder .fill-btn.btn span:first-letter {
      text-transform: uppercase; }

.form {
  display: flex;
  align-items: center;
  padding: 3.75rem 0; }
  @media (max-width: 1023px) {
    .form {
      padding: 1.875rem 0; } }

.search-input {
  -webkit-appearance: none;
  color: var(--c-light);
  padding: 10px 0 10px 12px;
  font-size: 24px;
  line-height: 1.167;
  border: none;
  font-family: var(--ff-regular);
  width: 100%;
  outline: 0; }
  .search-input::placeholder {
    color: #bababa; }
  @media (min-width: 1024px) {
    .search-input {
      padding: 10px 0 10px 20px; } }

.asset-main {
  margin-top: 0; }

.assets {
  display: grid;
  grid-gap: var(--gutter-width);
  grid-template-columns: 1fr 1fr 1fr; }
  @media (max-width: 768px) {
    .assets {
      grid-template-columns: 1fr 1fr; } }
  @media (max-width: 501px) {
    .assets:not(.no-single-view) {
      grid-template-columns: 1fr; } }
  .assets.always-triple {
    grid-template-columns: 1fr 1fr 1fr; }
    @media (max-width: 501px) {
      .assets.always-triple .source {
        display: none; } }

.asset {
  background-color: #FFF;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  overflow: hidden;
  position: relative; }
  .asset a {
    display: block; }
  .asset h2, .asset h3 {
    white-space: nowrap;
    display: inline-block;
    font-size: calc(15px*1.3);
    font-weight: normal;
    margin: 0; }
    @media (max-width: 1023px) {
      .asset h2, .asset h3 {
        font-size: 15px; } }
  .asset h2 {
    border-bottom: 1px solid black;
    line-height: 0.9; }
  .asset h3 {
    text-transform: lowercase;
    font-size: 1rem; }
  .asset .content__wrapper {
    text-align: left;
    padding: 1.875rem; }
  .asset p {
    margin: 0; }
  .asset .view-plugin {
    font-weight: 500;
    font-size: 15px;
    white-space: nowrap; }
    .asset .view-plugin:first-letter {
      text-transform: uppercase; }
  .asset .source {
    white-space: nowrap;
    color: var(--c-light);
    overflow: hidden;
    position: relative;
    font-size: 15px; }
    .asset .source:first-letter {
      text-transform: uppercase; }
  .asset .bottom-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .25rem; }
  .asset .asset-holder {
    padding-bottom: 56.25%;
    width: 100%;
    height: 0;
    position: relative;
    background-color: #2d2b47; }
    .asset .asset-holder > img, .asset .asset-holder > iframe {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      object-fit: initial; }
  .asset .badge {
    width: 160px;
    padding: 0.2rem;
    font-size: 1.2rem;
    color: white;
    position: absolute;
    text-align: center;

    margin-top: 3rem;
    top:  0px;
    left: -35px;

  /*  box-shadow:*/
  /*          0 2.8px 2.2px rgba(0, 0, 0, 0.034),*/
  /*          0 6.7px 5.3px rgba(0, 0, 0, 0.048),*/
  /*          0 12.5px 10px rgba(0, 0, 0, 0.06),*/
  /*          0 22.3px 17.9px rgba(0, 0, 0, 0.072),*/
  /*          0 41.8px 33.4px rgba(0, 0, 0, 0.086),*/
  /*          0 100px 80px rgba(0, 0, 0, 0.12)*/
  /*;*/

    transform-origin: top left;
    transform: rotate(-0.5rad);

    /*background: rgb(9,9,121);
    background: linear-gradient(90deg, rgba(9,9,121,1) 0%, rgba(0,136,255,1) 100%);*/

  }

footer {
  margin-top: auto;
  width: 100%;
  background: #1b182e;
  padding: 4rem 3rem 3rem; }
  @media (max-width: 1023px) {
    footer {
      padding: 4rem 5% 5%; } }

.footer {
  max-width: 1180px; }
  .footer .container {
    display: grid;
    grid-gap: 2rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
    padding: 0 7.5%; }
  .footer .colum p {
    margin: 15px 0; }
  .footer .colum .item {
    font-size: 12px;
    line-height: 1.1667;
    display: inline-block;
    font-family: var(--ff-regular); }
  .footer .colum .subitem {
    color: var(--c-light); }
  .footer .colum a {
    white-space: nowrap;
    text-decoration: none; }
  .footer .rights, .footer .colum .title {
    font-size: 15px;
    line-height: 1.2;
    font-weight: var(--fw-semi);
    margin: 0 0 24px;
    color: #FFF;
    font-family: var(--ff-regular); }
  .footer .rights {
    font-size: 11px;
    font-weight: var(--fw-medium);
    color: var(--c-light);
    margin: 0; }
    @media (min-width: 1024px) {
      .footer .rights {
        margin-top: 3rem;
        margin-left: 7.5%; } }

figure {
  margin: 0;
  padding: 0; }

.panel {
  background-color: #fff;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.05);
  padding: 5%;
  border-radius: 3px;
  margin-bottom: 60px;
  display: flex;
  flex-flow: column nowrap; }
  @media (min-width: 1024px) {
    .panel {
      flex-flow: row nowrap; }
      .panel > * {
        width: 50%; }
      .panel > div {
        margin-left: 2rem; } }
  .panel h2 {
    font-size: 1.5rem;
    margin: 0; }
  .panel img {
    width: 100%; }
  .panel ul {
    padding: 0;
    display: flex; }
    .panel ul li {
      list-style-type: none;
      width: 33%;
      text-align: center; }
      .panel ul li img {
        width: 3.75rem;
        height: 3.75rem; }

.full-width-block {
  padding: 3.75rem;
  width: 100%;
  text-align: center;
  margin: 3.75rem auto 0; }
  @media (max-width: 1023px) {
    .full-width-block {
      padding: 3.75rem 5%; } }
  .full-width-block.purple {
    background-color: #67617d;
    color: #fff; }
  .full-width-block h3 {
    margin-top: 0;
    font-size: 24px;
    font-weight: 400; }
  .full-width-block p {
    margin-bottom: 1.5rem;
    font-weight: bold;
    font-size: 0.875rem; }
  .full-width-block a {
    display: inline-block;
    text-transform: lowercase; }
    .full-width-block a:first-letter {
      text-transform: uppercase; }

hr {
  margin: 4rem auto 1rem;
  -webkit-appearance: none;
  border: 0;
  border-bottom: 1px solid var(--c-light); }

.download {
  overflow-x: hidden;
  width: 100%;
  max-width: unset;
  padding: 1rem 15%;
  min-height: 100vh; }
  .download .contain-overflow {
    display: flex;
    margin: 0 auto;
    max-width: var(--container-width); }
  .download .content__container {
    padding-right: calc(1.875rem / 1.25);
    padding-left: calc(1.875rem / 1.25); }
    @media (max-width: 1024px) {
      .download .content__container {
        padding: 0;
        margin: 0;
        width: 100%; } }
  .download img {
    width: 100%;
    height: auto;
    margin: .875rem auto 0; }
  .download ul {
    padding: 0;
    margin: 2rem 0 4rem; }
    .download ul li {
      list-style-type: none;
      font-weight: var(--fw-medium);
      font-size: 12.75px;
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center; }
      .download ul li svg {
        margin-right: .75rem; }
      @media (min-width: 1024px) {
        .download ul li {
          white-space: nowrap; } }
  @media (min-width: 768px) {
    .download {
      padding: 7.5rem var(--outer-margin);
      margin: 0; }
      .download .content__container {
        flex-basis: 50%;
        max-width: 50%; }
      .download .image-holder {
        display: block;
        flex-basis: 50%;
        max-width: 50%; }
      .download img {
        width: auto;
        height: 670px;
        margin: 0;
        padding-left: calc(1.875rem / 1.25); }
      .download ul {
        margin: 4rem 0; }
        .download ul li {
          margin-bottom: 2rem;
          font-size: 15px; } }
  @media (min-width: 1280px) {
    .download {
      padding: 7.5rem 15%; }
      .download .button-holder {
        display: grid;
        grid-gap: 2rem;
        grid-template-columns: 1fr 1fr; } }
  .download h1 {
    line-height: normal;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 2rem;
    margin-top: 0; }
  .download .description {
    font-size: 18px;
    line-height: 1.33;
    font-weight: var(--fw-medium);
    max-width: 27.75rem; }
  .download .button-holder {
    width: fit-content; }
  .download .btn {
    display: block;
    margin: 1rem 0;
    width: 100%;
    white-space: nowrap;
    text-transform: none; }
  .download .outline-btn {
    border-color: var(--c-primary);
    color: var(--c-primary); }
    .download .outline-btn:hover {
      border-color: var(--c-light);
      color: var(--c-light); }
  .download .support {
    color: var(--c-light);
    margin-top: 3rem;
    font-size: 15px; }
    .download .support p {
      margin: 0; }
  @media (max-width: 768px) {
    .download .button-holder {
      margin: 0 auto; }
    .download .support {
      text-align: center; }
    .download .btn {
      white-space: normal;
      text-align: center; } }
  @media (max-width: 767px) {
    .download .desktop {
      display: none !important; }
    .download .mobile {
      display: initial !important; } }
  @media (min-width: 768px) {
    .download .desktop {
      display: initial !important; }
    .download .mobile {
      display: none !important; } }

@media (max-width: 1023px) {
  .desktop {
    display: none !important; }
  .mobile {
    display: initial !important; } }

@media (min-width: 1024px) {
  .desktop {
    display: initial !important; }
  .mobile {
    display: none !important; } }

.about {
  margin: 0 auto;
  font-size: 15px;
  padding: 90px 10% 9rem; }
  .about > .container {
    max-width: 34.5rem;
    margin: 0 auto; }
  .about .title {
    margin-bottom: 30px;
    margin-top: 0; }
    @media (min-width: 1024px) {
      .about .title {
        margin-bottom: 60px; } }
  .about .h1, .about h1 {
    font-size: 24px; }
  .about p {
    line-height: calc(15px*1.7);
    font-size: 15px; }
  .about img {
    display: block;
    margin: 0 auto; }
  .about a {
    text-decoration: underline; }
  .about hr {
    margin: 1rem 0; }

.carousel {
  margin: 0 auto;
  display: flex; }

.carousel a {
  text-decoration: none; }

.carousel-highlight {
  width: 67.5%;
  height: 100%;
  position: relative;
  margin: 0 1.75rem 0 0;
  border: 1px solid white; }
  @media (max-width: 768px) {
    .carousel-highlight {
      width: 100%;
      margin: 0; } }

.carousel-holder {
  border-radius: 3px;
  width: 100%;
  white-space: nowrap;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden; }
  .carousel-holder figure {
    position: relative;
    display: inline-block;
    height: 0;
    padding-bottom: 56.25%;
    width: 100%;
    border-radius: 3px;
    background-color: #1b182e; }
    @media (max-width: 768px) {
      .carousel-holder figure {
        width: 90%;
        margin-right: 1.25rem; } }
    .carousel-holder figure img {
      object-fit: contain;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0; }

.carousel-preview {
  width: 32.5%;
  margin: 0;
  overflow-y: auto; }
  .carousel-preview a {
    display: inline-block;
    width: calc(50% - 1rem);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background-color: #2d2b47;
    position: relative;
    height: 0;
    padding-bottom: calc((50% - 1rem) * 0.5625); }
    .carousel-preview a:nth-of-type(2n+1) {
      margin-right: 1.5rem; }
  @media (max-width: 768px) {
    .carousel-preview {
      display: none; } }

.carousel-preview img {
  pointer-events: none;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  position: absolute;
  top: 0;
  left: 0; }

.detail {
  margin-top: 5.5rem; }
  @media (max-width: 768px) {
    .detail {
      padding: 0 5%; } }
  .detail hr {
    border-bottom: 1px solid var(--c-light);
    opacity: .25; }
  .detail h1 {
    font-size: 1.5rem;
    font-weight: var(--fw-medium);
    margin-bottom: 0; }
  .detail p {
    line-height: 1.7em;
    font-size: 0.875rem;
    max-width: 40rem; }
  .detail .author {
    font-size: 0.75rem;
    margin-top: 0; }
  .detail .btn {
    display: inline-block; }
  .detail .content__spacer {
    margin: 2rem 0 3rem; }
    @media (max-width: 768px) {
      .detail .content__spacer {
        padding: 0 1.875rem; } }
  .detail .video-container {
    position: relative;
    width: 100%;
    margin-top: 12.75px;
    padding-bottom: 56.25%; }
    .detail .video-container .video {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0; }
    .detail .video-container iframe {
      width: 100%;
      height: 100%; }
  .detail .item-details {
    margin-top: 2rem; }
    @media (max-width: 768px) {
      .detail .item-details {
        padding: 0 1.875rem; } }
    .detail .item-details h2 {
      display: block;
      font-weight: bold;
      margin-bottom: 2rem; }
    .detail .item-details .grid {
      display: grid;
      grid-gap: 1rem 2rem;
      grid-template-columns: 1fr 1fr; }
      @media (max-width: 490px) {
        .detail .item-details .grid {
          grid-template-columns: 1fr; } }
      .detail .item-details .grid > div {
        max-width: 12rem; }
    .detail .item-details .last-item {
      margin-top: 2rem;
      max-width: 50%; }
    .detail .item-details .itemName, .detail .item-details .itemValue {
      font-size: 15px;
      margin: .25rem 0; }
  .detail .related .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 0; }
    @media (max-width: 768px) {
      .detail .related .header {
        padding: 0 2rem; } }
    .detail .related .header h2, .detail .related .header a {
      margin: 0;
      display: block;
      font-weight: 500; }
    .detail .related .header h2 {
      font-weight: 600; }
    .detail .related .header a {
      font-size: 16px;
      margin-left: auto; }
  .detail .related ul {
    padding: 0;
    display: flex;
    min-width: 18rem;
    margin: 4rem auto; }
    @media (min-width: 768px) {
      .detail .related ul {
        width: 50%; } }
    .detail .related ul li {
      list-style-type: none;
      width: 30%;
      height: 100%;
      text-align: center; }
      .detail .related ul li a {
        display: block;
        width: 100%;
        height: 100%; }
      .detail .related ul li img {
        width: 5rem;
        height: 5rem; }

.sprite {
  position: absolute;
  top: 0;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  opacity: 0;
  transition: opacity .3s ease-in-out; }

.sprite.active {
  opacity: 1; }