/* SCSS RGB */
*,
*:after,
*:before {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  background-color: var(--color-black);
  color: var(--color-initial);
  font-family: var(--body-font-family);
  font-size: 1.6em;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6;
  padding: 0;
  margin: 0;
}

blockquote {
  border-left: 0.3rem solid var(--color-quaternary);
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 1.5rem;
}
blockquote *:last-child {
  margin-bottom: 0;
}

.button,
button,
input[type=button],
input[type=reset],
input[type=submit] {
  background-color: var(--color-primary);
  border: 0.1rem solid var(--color-primary);
  border-radius: 0.4rem;
  color: var(--color-initial);
  cursor: pointer;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  height: 3.8rem;
  letter-spacing: 0.1rem;
  line-height: 3.8rem;
  padding: 0 3rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.2s ease all;
  white-space: nowrap;
}
.button:focus, .button:hover,
button:focus,
button:hover,
input[type=button]:focus,
input[type=button]:hover,
input[type=reset]:focus,
input[type=reset]:hover,
input[type=submit]:focus,
input[type=submit]:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-initial);
  outline: 0;
}
.button[disabled],
button[disabled],
input[type=button][disabled],
input[type=reset][disabled],
input[type=submit][disabled] {
  cursor: default;
  opacity: 0.5;
}
.button[disabled]:focus, .button[disabled]:hover,
button[disabled]:focus,
button[disabled]:hover,
input[type=button][disabled]:focus,
input[type=button][disabled]:hover,
input[type=reset][disabled]:focus,
input[type=reset][disabled]:hover,
input[type=submit][disabled]:focus,
input[type=submit][disabled]:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.button.button-secondary,
button.button-secondary,
input[type=button].button-secondary,
input[type=reset].button-secondary,
input[type=submit].button-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.button.button-secondary:hover,
button.button-secondary:hover,
input[type=button].button-secondary:hover,
input[type=reset].button-secondary:hover,
input[type=submit].button-secondary:hover {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}
.button.button-white,
button.button-white,
input[type=button].button-white,
input[type=reset].button-white,
input[type=submit].button-white {
  background-color: var(--color-initial);
  border-color: var(--color-initial);
  color: var(--color-black);
}
.button.button-white:hover,
button.button-white:hover,
input[type=button].button-white:hover,
input[type=reset].button-white:hover,
input[type=submit].button-white:hover {
  background-color: var(--color-initial);
  border-color: var(--color-initial);
  color: var(--color-secondary);
}
.button.button-small,
button.button-small,
input[type=button].button-small,
input[type=reset].button-small,
input[type=submit].button-small {
  font-size: 0.8rem;
  height: 3rem;
  line-height: 3rem;
}
.button.button-large,
button.button-large,
input[type=button].button-large,
input[type=reset].button-large,
input[type=submit].button-large {
  font-size: 1.5rem;
  height: 5rem;
  line-height: 5rem;
}
.button.button-outline,
button.button-outline,
input[type=button].button-outline,
input[type=reset].button-outline,
input[type=submit].button-outline {
  background-color: transparent;
  color: var(--color-primary);
}
.button.button-outline:focus, .button.button-outline:hover,
button.button-outline:focus,
button.button-outline:hover,
input[type=button].button-outline:focus,
input[type=button].button-outline:hover,
input[type=reset].button-outline:focus,
input[type=reset].button-outline:hover,
input[type=submit].button-outline:focus,
input[type=submit].button-outline:hover {
  background-color: transparent;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
button.button-outline[disabled]:focus,
button.button-outline[disabled]:hover,
input[type=button].button-outline[disabled]:focus,
input[type=button].button-outline[disabled]:hover,
input[type=reset].button-outline[disabled]:focus,
input[type=reset].button-outline[disabled]:hover,
input[type=submit].button-outline[disabled]:focus,
input[type=submit].button-outline[disabled]:hover {
  border-color: inherit;
  color: var(--color-primary);
}
.button.button-clear,
button.button-clear,
input[type=button].button-clear,
input[type=reset].button-clear,
input[type=submit].button-clear {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-primary);
}
.button.button-clear:focus, .button.button-clear:hover,
button.button-clear:focus,
button.button-clear:hover,
input[type=button].button-clear:focus,
input[type=button].button-clear:hover,
input[type=reset].button-clear:focus,
input[type=reset].button-clear:hover,
input[type=submit].button-clear:focus,
input[type=submit].button-clear:hover {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-secondary);
}
.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
button.button-clear[disabled]:focus,
button.button-clear[disabled]:hover,
input[type=button].button-clear[disabled]:focus,
input[type=button].button-clear[disabled]:hover,
input[type=reset].button-clear[disabled]:focus,
input[type=reset].button-clear[disabled]:hover,
input[type=submit].button-clear[disabled]:focus,
input[type=submit].button-clear[disabled]:hover {
  color: var(--color-primary);
}

code {
  background: var(--color-tertiary);
  border-radius: 0.4rem;
  font-size: 86%;
  margin: 0 0.2rem;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}

pre {
  background: var(--color-tertiary);
  border-left: 0.3rem solid var(--color-primary);
  overflow-y: hidden;
}
pre > code {
  border-radius: 0;
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
}

hr {
  border: 0;
  border-top: 0.1rem solid var(--color-tertiary);
  margin: 6rem 0;
}

input[type=color],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
input[type=week],
input:not([type]),
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 0.1rem solid var(--color-quaternary);
  border-radius: 0.4rem;
  box-shadow: none;
  box-sizing: inherit;
  height: 3.8rem;
  padding: 0.6rem 1rem 0.7rem;
  width: 100%;
}
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus,
input[type=week]:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  outline: 0;
}

select {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23ar(--color-quaternary)" d="M0,0l6,8l6-8"/></svg>') center right no-repeat;
  padding-right: 3rem;
}
select:focus {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23ar(--color-primary)" d="M0,0l6,8l6-8"/></svg>');
}
select[multiple] {
  background: none;
  height: auto;
}

textarea {
  min-height: 6.5rem;
}

label,
legend {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

fieldset {
  border-width: 0;
  padding: 0;
}

input[type=checkbox],
input[type=radio] {
  display: inline;
}

.label-inline {
  display: inline-block;
  font-weight: normal;
  margin-left: 0.5rem;
}

.container {
  margin: 0 auto;
  max-width: 112rem;
  padding: 0 2rem;
  position: relative;
  width: 100%;
}
.container.container-small {
  max-width: 40rem;
}
.container.container-large {
  max-width: 80rem;
}

.container.narrow {
  max-width: 80rem;
}

.row {
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100%;
}
.row.row-no-padding {
  padding: 0;
}
.row.row-no-padding > .column {
  padding: 0;
}
.row.row-wrap {
  flex-wrap: wrap;
}
.row.row-top {
  align-items: flex-start;
}
.row.row-bottom {
  align-items: flex-end;
}
.row.row-center {
  align-items: center;
}
.row.row-stretch {
  align-items: stretch;
}
.row.row-baseline {
  align-items: baseline;
}
.row .column {
  display: block;
  flex: 1 1 auto;
  margin-left: 0;
  max-width: 100%;
  width: 100%;
}
.row .column.column-offset-10 {
  margin-left: 10%;
}
.row .column.column-offset-20 {
  margin-left: 20%;
}
.row .column.column-offset-25 {
  margin-left: 25%;
}
.row .column.column-offset-33, .row .column.column-offset-34 {
  margin-left: 33.3333%;
}
.row .column.column-offset-40 {
  margin-left: 40%;
}
.row .column.column-offset-50 {
  margin-left: 50%;
}
.row .column.column-offset-60 {
  margin-left: 60%;
}
.row .column.column-offset-66, .row .column.column-offset-67 {
  margin-left: 66.6666%;
}
.row .column.column-offset-75 {
  margin-left: 75%;
}
.row .column.column-offset-80 {
  margin-left: 80%;
}
.row .column.column-offset-90 {
  margin-left: 90%;
}
.row .column.column-10 {
  flex: 0 0 10%;
  max-width: 10%;
}
.row .column.column-20 {
  flex: 0 0 20%;
  max-width: 20%;
}
.row .column.column-25 {
  flex: 0 0 25%;
  max-width: 25%;
}
.row .column.column-33, .row .column.column-34 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}
.row .column.column-40 {
  flex: 0 0 40%;
  max-width: 40%;
}
.row .column.column-50 {
  flex: 0 0 50%;
  max-width: 50%;
}
.row .column.column-60 {
  flex: 0 0 60%;
  max-width: 60%;
}
.row .column.column-66, .row .column.column-67 {
  flex: 0 0 66.6666%;
  max-width: 66.6666%;
}
.row .column.column-75 {
  flex: 0 0 75%;
  max-width: 75%;
}
.row .column.column-80 {
  flex: 0 0 80%;
  max-width: 80%;
}
.row .column.column-90 {
  flex: 0 0 90%;
  max-width: 90%;
}
.row .column .column-top {
  align-self: flex-start;
}
.row .column .column-bottom {
  align-self: flex-end;
}
.row .column .column-center {
  align-self: center;
}

@media (min-width: 40rem) {
  .row {
    flex-direction: row;
    margin-left: -1rem;
    width: calc(100% + 2rem);
  }
  .row .column {
    margin-bottom: inherit;
    padding: 0 1rem;
  }
}
.row {
  gap: 6rem;
}
@media only screen and (min-width: 60rem) {
  .row {
    gap: 1rem;
  }
}
.row .column.column-33, .row .column.column-34 {
  flex: 1 1 auto;
  max-width: 100%;
}
@media only screen and (min-width: 60rem) {
  .row .column.column-33, .row .column.column-34 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
.row .column.column-66, .row .column.column-67 {
  flex: 1 1 auto;
  max-width: 100%;
}
@media only screen and (min-width: 60rem) {
  .row .column.column-66, .row .column.column-67 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:focus, a:hover {
  color: var(--color-secondary);
}

dl,
ol,
ul {
  list-style: none;
  margin-top: 0;
  padding-left: 0;
}
dl dl,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
  font-size: 90%;
  margin: 1.5rem 0 1.5rem 3rem;
}

ol {
  list-style: decimal inside;
}

ul {
  list-style: circle inside;
}

.button,
button,
dd,
dt,
li {
  margin-bottom: 1rem;
}

fieldset,
input,
select,
textarea {
  margin-bottom: 1.5rem;
}

blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
  margin-bottom: 2.5rem;
}

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

table {
  border-spacing: 0;
  display: block;
  overflow-x: auto;
  text-align: left;
  width: 100%;
}

td,
th {
  border-bottom: 0.1rem solid var(--color-quinary);
  padding: 1.2rem 1.5rem;
}
td:first-child,
th:first-child {
  padding-left: 0;
}
td:last-child,
th:last-child {
  padding-right: 0;
}

@media (min-width: 40rem) {
  table {
    display: table;
    overflow-x: initial;
  }
}
b,
strong {
  font-weight: bold;
}

p {
  margin-top: 0;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
  margin-top: 0;
  text-transform: uppercase;
}
h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small {
  font-weight: 400;
  font-style: normal;
  font-size: 0.75em;
}

h1, .h1 {
  font-size: 4.6rem;
  line-height: 1.2;
}

h2, .h2 {
  font-size: 2.8rem;
  line-height: 1.25;
}
@media only screen and (min-width: 40rem) {
  h2, .h2 {
    font-size: 3.6rem;
  }
}

h3, .h3 {
  font-size: 2.4rem;
  line-height: 1.3;
}
@media only screen and (min-width: 40rem) {
  h3, .h3 {
    font-size: 2.8rem;
  }
}

h4, .h4 {
  font-size: 2.2rem;
  line-height: 1.35;
}

h5, .h5 {
  font-size: 1.8rem;
  line-height: 1.5;
}

h6, .h6 {
  font-size: 1.6rem;
  letter-spacing: 0;
  line-height: 1.4;
}

img {
  max-width: 100%;
}

.clearfix:after {
  clear: both;
  content: " ";
  display: table;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.collapsable__read-more {
  text-align: center;
}
.collapsable__read-more button {
  border-radius: 0.5rem;
  display: flex;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.2rem;
  height: 4.4rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  text-align: center;
  overflow: hidden;
  text-transform: none;
}
.collapsable__read-more button span {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  font-size: 2rem;
  justify-content: center;
  text-transform: uppercase;
  height: 100%;
  width: 2.5em;
}
.collapsable__read-more button span img, .collapsable__read-more button span svg {
  max-width: 20px;
}
.collapsable__read-more button div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  height: 100%;
  width: 12rem;
}
.collapsable__read-more button div b {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.2rem;
}
.collapsable__read-more button div > small {
  display: block;
  font-size: 1rem;
  font-weight: lighter;
}

.collapsable-content {
  display: none;
}

.no-js .collapsable__read-more {
  display: none;
}
.no-js .collapsable-content {
  display: block;
}

.awards-list {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  list-style: none;
}
.awards-list li {
  margin: 0;
  padding: 0;
}
.awards-list li img {
  max-height: 75px;
}
.awards-list .award-text {
  font-size: 0.6em;
  font-weight: bold;
  text-transform: uppercase;
}
.awards-list .award-text small {
  display: block;
  font-weight: normal;
}
@media only screen and (min-width: 40rem) {
  .awards-list .award-text {
    font-size: inherit;
  }
}

.bio-headshot img {
  border-radius: 0.5rem;
  display: block;
  margin: 0 auto;
  height: 100%;
  width: 50%;
  height: auto;
}
@media only screen and (min-width: 40rem) {
  .bio-headshot img {
    width: 100%;
  }
}

.card__vendor {
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--color-primary);
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1rem;
  overflow: hidden;
  max-width: 40rem;
  margin: 0 auto;
}
.card__vendor h3 {
  font-size: 1.6rem;
  margin: 1rem 2rem 0;
  text-align: center;
}
.card__vendor img {
  display: block;
  line-height: 1;
  max-width: 24rem;
  padding: 2rem;
}
.card__vendor .button {
  border-radius: 0;
  margin: 0;
  width: 100%;
}

.card__platforms-retailers {
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--color-primary);
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1rem;
  overflow: hidden;
  max-width: 40rem;
  margin: 4rem auto 0;
}
.card__platforms-retailers .card-title {
  font-size: 1.6rem;
  margin: 1rem 2rem 0;
  text-align: center;
}
.card__platforms-retailers .card-content {
  margin: 1rem;
}
.card__platforms-retailers img {
  display: block;
  line-height: 1;
  max-width: 24rem;
}
.card__platforms-retailers .badge {
  display: block;
  max-width: 16rem;
}
.card__platforms-retailers .badge svg {
  height: auto;
  width: 100%;
}
.card__platforms-retailers .button {
  border-radius: 0;
  margin: 0;
  width: 100%;
}

.character-gallery {
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 2rem;
}
.character-gallery img {
  border-radius: 0.5rem;
}
@media only screen and (min-width: 40rem) {
  .character-gallery.landscape .splide__slide {
    padding: 0 6rem;
  }
}
.character-gallery.landscape .character-image img {
  height: auto;
}
.character-gallery.landscape .character-data {
  padding: 2rem;
  text-align: center;
}
.character-gallery.landscape .character-data h3 {
  margin-bottom: 1rem;
}
.character-gallery.portrait .splide__slide {
  display: flex;
  gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
}
@media only screen and (min-width: 40rem) {
  .character-gallery.portrait .splide__slide {
    padding: 0 6rem;
    flex-direction: row-reverse;
  }
  .character-gallery.portrait .splide__slide .character-data,
  .character-gallery.portrait .splide__slide .character-image {
    width: calc(50% - 1rem);
  }
}
.character-gallery.portrait .splide__slide img {
  height: auto;
}

.character-gallery-thumbnails {
  display: flex;
  gap: 2rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.character-gallery-thumbnails .thumbnail {
  margin: 0;
  border: 2px solid var(--color-tertiary);
  border-radius: 0.5rem;
  cursor: pointer;
  overflow: hidden;
  width: 6rem;
}
@media only screen and (min-width: 40rem) {
  .character-gallery-thumbnails .thumbnail {
    width: 8rem;
  }
}
.character-gallery-thumbnails .thumbnail img {
  display: block;
  height: 100%;
}
.character-gallery-thumbnails .thumbnail.is-active {
  border-color: var(--color-primary);
}

.character-gallery-x .row {
  flex-direction: column-reverse;
}
@media only screen and (min-width: 40rem) {
  .character-gallery-x .row {
    flex-direction: row;
  }
}
.character-gallery-x .character-details {
  display: flex;
  justify-content: space-between;
  flex-direction: column-reverse;
}
@media only screen and (min-width: 40rem) {
  .character-gallery-x .character-details {
    flex-direction: column;
  }
}
.character-gallery-x .character-bio {
  display: none;
}
.character-gallery-x .character-bio.is-active {
  display: block;
}
.character-gallery-x .character-bio img {
  display: none;
}
.character-gallery-x .character-bio h4 {
  text-align: center;
}
@media only screen and (min-width: 40rem) {
  .character-gallery-x .character-bio h4 {
    text-align: left;
  }
}
.character-gallery-x .character-thumbnails {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 3.2rem;
}
@media only screen and (min-width: 40rem) {
  .character-gallery-x .character-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}
.character-gallery-x .character-thumbnails li {
  margin: 0;
  padding: 0;
  line-height: 0;
}
.character-gallery-x .character-thumbnails button {
  all: unset;
}
.character-gallery-x .character-thumbnails img {
  border-radius: 0.5rem;
  border: 1px solid #606c76;
  opacity: 0.8;
}
.character-gallery-x .character-thumbnails .is-active {
  opacity: 1;
  border-color: var(--color-primary);
}
@media only screen and (min-width: 40rem) {
  .character-gallery-x .character-thumbnails {
    margin-bottom: 0rem;
  }
}

.character-portrait {
  margin-bottom: -5rem;
}
.character-portrait .splide__slide {
  display: flex;
}
.character-portrait .splide__slide img {
  border-radius: 0.5rem;
  margin: 0 auto;
  width: 50%;
  height: auto;
}
@media only screen and (min-width: 40rem) {
  .character-portrait .splide__slide img {
    width: 100%;
  }
}
@media only screen and (min-width: 40rem) {
  .character-portrait {
    margin-bottom: 0rem;
  }
}

.no-js #character-gallery .character-bios {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.no-js #character-gallery .character-bio {
  display: grid;
  gap: 2rem;
  grid-template-columns: 0.33fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "portrait header" "portrait description";
}
.no-js #character-gallery .character-bio img {
  display: block;
  grid-area: portrait;
  border-radius: 0.5rem;
}
.no-js #character-gallery .character-bio .character-bio__header {
  grid-area: header;
}
.no-js #character-gallery .character-bio .character-bio__description {
  grid-area: description;
}
.no-js #character-gallery .character-thumbnails {
  display: none;
}
.no-js #character-gallery .character-portrait {
  display: none;
}

.disc-specs dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
}
@media only screen and (min-width: 24rem) {
  .disc-specs dl {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 40rem) {
  .disc-specs dl {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.disc-specs dl dt {
  font-weight: bold;
  margin: 0;
}
.disc-specs dl dd {
  margin: 0;
}

footer {
  background-color: black;
  color: white;
  padding: 4rem 0 2rem;
}
footer img {
  max-width: 12rem;
  margin-bottom: 2rem;
}
footer h3 {
  font-size: 1.6rem;
  margin-bottom: 0;
}
footer .gkids-nav {
  margin-bottom: 4rem;
}
footer .gkids-nav ul.gkids-nav-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
footer .gkids-nav ul.gkids-nav-list li {
  margin: 0;
  padding: 0;
}
footer .gkids-nav a {
  color: #fff;
}
footer .gkids-nav a:hover {
  color: var(--color-primary);
}
footer .copyright {
  margin-top: 3rem;
}
footer .copyright, footer .privacy-policy {
  font-size: 0.8em;
  text-align: center;
}
footer .privacy-policy {
  margin-top: 1rem;
  text-transform: uppercase;
}
footer .privacy-policy a {
  color: white;
}
footer .privacy-policy a:hover {
  color: white;
  text-decoration: underline;
}

footer .row {
  flex-direction: column;
  text-align: center;
  gap: 1rem;
}
footer .row .social-list {
  justify-content: center;
  font-size: 1.6em;
}
@media only screen and (min-width: 60rem) {
  footer .row {
    flex-direction: row;
    text-align: left;
  }
  footer .row .social-list {
    justify-content: flex-start;
    font-size: 1em;
  }
}
footer .row .column.column-20 {
  flex: 1 1 auto;
  max-width: 100%;
}
@media only screen and (min-width: 60rem) {
  footer .row .column.column-20 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

.gform_wrapper .gform_submission_error, .gform_wrapper .gform_confirmation_message {
  font-size: 1em;
  color: var(--color-initial);
  background-color: var(--color-alert);
  padding: 2rem;
  border-radius: 0.2rem;
  margin-bottom: 6rem;
  letter-spacing: initial;
  text-align: center;
}
.gform_wrapper .gfield_validation_message {
  color: var(--color-initial);
  background-color: var(--color-alert);
  padding: 0.5rem 1rem;
  border-radius: 0.2rem;
  margin-bottom: 6rem;
  letter-spacing: initial;
  display: inline-block;
  font-weight: bold;
}
.gform_wrapper .gform_confirmation_message {
  background-color: var(--color-success);
  margin-bottom: 0rem;
  font-weight: bold;
}
.gform_wrapper .gfield_description + .gfield_validation_message {
  margin-top: 2rem;
}
.gform_wrapper .gform_fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.gform_wrapper .gfield--width-full,
.gform_wrapper .gfield--width-half {
  width: 100%;
}
@media only screen and (min-width: 40rem) {
  .gform_wrapper .gfield--width-half {
    width: calc(50% - 1rem);
    font-size: 2.8rem;
  }
}
.gform_wrapper .gfield {
  margin-bottom: 4rem;
}
.gform_wrapper .gfield_label {
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper textarea {
  background-color: var(--color-initial);
}
.gform_wrapper .gfield_required {
  color: var(--color-alert);
  font-size: 0.8em;
  margin-left: 0.5rem;
  text-transform: uppercase;
}
.gform_wrapper .gfield_description {
  font-size: 1.25rem;
}
.gform_wrapper .ginput_container_checkbox {
  margin-top: 2rem;
}
.gform_wrapper .ginput_container_checkbox .gfield_checkbox {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gform_wrapper .ginput_container_checkbox .gfield_checkbox label {
  display: inline;
  font-weight: normal;
}
.gform_wrapper .ginput_container_list thead {
  font-size: 0.8em;
}
@media only screen and (min-width: 40rem) {
  .gform_wrapper .ginput_container_list thead {
    font-size: 1em;
  }
}
.gform_wrapper .ginput_container_list .gfield_list .gfield_list_cell input {
  margin-bottom: 0;
}
.gform_wrapper .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}
.gform_wrapper .gsection .gsection_title {
  font-size: 2.4rem;
  line-height: 1.3;
}
@media only screen and (min-width: 40rem) {
  .gform_wrapper .gsection .gsection_title {
    font-size: 2.8rem;
  }
}

#primary-header {
  background-color: #343a40;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 12rem 2rem 6rem;
  text-align: center;
}
#primary-header .title-treatment {
  margin-bottom: 3rem;
}
#primary-header .title-treatment img {
  display: block;
  height: 100%;
  margin: 0 auto;
  max-width: 48rem;
  width: 100%;
}
#primary-header .a-film-by {
  font-size: 1.2em;
  margin-bottom: 2rem;
}
#primary-header .vendors {
  display: flex;
}
#primary-header .column:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media only screen and (max-width: 60rem) {
  #primary-header .row {
    flex-direction: column;
    gap: 6rem;
  }
}

#primary-header .title-treatment {
  margin-bottom: 4rem;
}
@media only screen and (max-width: calc(40rem - 1px)) {
  #primary-header .subtitle .top-line {
    font-size: 1.5em;
  }
  #primary-header .subtitle .bottom-line {
    font-size: 1em;
  }
}
#primary-header .call-to-action {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 4rem auto 0;
}
@media only screen and (min-width: 40rem) {
  #primary-header .call-to-action {
    flex-direction: row;
    gap: 2rem;
  }
}

#primary-header.home-video-header .title-information {
  grid-area: title-information;
}
#primary-header.home-video-header .box-art {
  align-items: center;
  display: flex;
  grid-area: box-art;
  justify-content: center;
}
#primary-header.home-video-header .box-art img {
  height: auto;
  max-width: 24rem;
  width: 100%;
}
@media only screen and (min-width: 40rem) {
  #primary-header.home-video-header .box-art img {
    max-width: 40rem;
  }
}
#primary-header.home-video-header .vendors {
  grid-area: vendors;
  margin-top: 4rem;
}

.image_tiles {
  padding: 0;
}

.image-tile {
  padding: 3.6rem 0;
}
.image-tile .image-tile__content {
  display: flex;
  align-items: center;
}
.image-tile .image-tile__image {
  display: flex;
  align-items: center;
}
.image-tile .image-tile__image img {
  border-radius: 0.5rem;
  display: block;
  height: auto;
}
.image-tile .row {
  gap: 3.6rem;
}
@media only screen and (min-width: 60rem) {
  .image-tile .row {
    gap: 2.4rem;
  }
}
.image-tile .row .column.column-50 {
  flex: 1;
  max-width: 100%;
}
@media only screen and (min-width: 60rem) {
  .image-tile .row .column.column-50 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

.image-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  line-height: 0;
}
.image-gallery img {
  border-radius: 0.5rem;
  display: block;
  line-height: 0;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.synopsis-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  line-height: 0;
}
.synopsis-gallery.poster-only {
  display: block;
}
@media only screen and (min-width: 40rem) {
  .synopsis-gallery.poster-only {
    display: grid;
  }
}
.synopsis-gallery a:first-of-type {
  grid-row: 1/5;
}
@media only screen and (min-width: 40rem) {
  .synopsis-gallery a:first-of-type {
    grid-column: 1/3;
    grid-row: auto;
  }
}
.synopsis-gallery img {
  border-radius: 0.5rem;
  display: block;
  line-height: 0;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

button.go3894874857 {
  background-color: var(--color-primary) !important;
  border: 0.1rem solid var(--color-primary) !important;
  border-radius: 0.4rem !important;
  color: #fff !important;
  cursor: pointer !important;
  display: inline-block !important;
  font-family: sofia-pro-condensed, sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1rem !important;
  padding: 0 3rem !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: 0.2s ease all;
}
button.go3894874857:hover {
  background-color: var(--color-primary-hover) !important;
}

#title-bar {
  background-color: black;
  position: fixed;
  width: 100%;
  z-index: 10;
  box-sizing: border-box;
}
#title-bar .row {
  flex-direction: row;
}
#title-bar .column {
  display: flex;
  align-items: center;
  height: 5rem;
}
#title-bar a#gkids-link {
  margin: 0 auto;
  display: flex;
}
#title-bar a#gkids-link img {
  height: 4.5rem;
}
#title-bar .social-list {
  margin-left: auto;
}
#title-bar .logo-top {
  display: none;
}
@media only screen and (min-width: 40rem) {
  #title-bar .logo-top {
    display: flex;
  }
}
#title-bar #gkids-logo {
  height: 36px;
  width: 36px;
}
#title-bar #gkids-logo svg {
  fill: white;
}

button#toggle {
  all: unset;
  cursor: pointer;
  font-style: normal;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.2s ease color;
}
button#toggle:hover {
  background: transparent;
  color: var(--color-primary);
}
button#toggle:focus {
  background-color: var(--color-primary);
  border-radius: 0.2rem;
  color: #FFF;
  padding: 1rem 2rem;
  margin-left: -2rem;
}

nav.primary-nav {
  font-style: normal;
  font-weight: bold;
}
nav.primary-nav ul#primary-menu {
  z-index: 9;
  background-color: rgba(35, 40, 44, 0.9);
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  padding: 1rem 2rem;
  position: fixed;
  top: 5rem;
  left: 0;
  width: 100%;
  list-style: none;
  margin: 0;
  text-transform: uppercase;
  transform: translateY(-100%);
  visibility: hidden;
  transition: 0.4s transform cubic-bezier(0.5, 0, 0, 1), visibility 0s linear 0.4s, box-shadow 0.4s ease;
}
nav.primary-nav ul#primary-menu li {
  margin: 0;
}
nav.primary-nav ul#primary-menu a {
  display: block;
}
nav.primary-nav ul#primary-menu.is-active {
  display: flex;
  transform: translateY(0%);
  visibility: visible;
  transition: 0.4s transform cubic-bezier(0.5, 0, 0, 1), visibility 0s linear, box-shadow 0.4s ease;
  box-shadow: 0px 0.3px 0.3px hsla(0, 0%, 0%, 0.11), 0px 1.1px 1.2px -0.8px hsla(0, 0%, 0%, 0.11), -0.1px 2.7px 3px -1.7px hsla(0, 0%, 0%, 0.11), -0.3px 6.6px 7.4px -2.5px hsla(0, 0%, 0%, 0.11);
}
@media only screen and (min-width: 60rem) {
  nav.primary-nav ul#primary-menu {
    flex-direction: row;
    gap: 1rem 4rem;
    flex-wrap: wrap;
  }
  nav.primary-nav ul#primary-menu a {
    display: inline-block;
  }
}

#primary-menu .menu-item a {
  color: white;
  display: block;
  transition: 0.2s ease all;
}
#primary-menu .menu-item a:hover, #primary-menu .menu-item a:focus {
  color: var(--color-link-hover);
}
@media only screen and (min-width: 40rem) {
  #primary-menu .menu-item a {
    display: inline-block;
  }
}

.no-js button#toggle {
  display: none;
}
.no-js nav.primary-nav ul#primary-menu {
  display: flex;
  transform: translateY(0%);
  visibility: visible;
}

.news .news-articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  overflow-x: auto;
}
@media only screen and (min-width: 40rem) {
  .news .news-articles {
    grid-template-columns: 1fr 1fr;
  }
}
.news .news-articles article.news-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.news .news-articles article.news-item .content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.news .news-articles article.news-item .thumbnail img {
  border-radius: 0.5rem;
  width: 100%;
  height: auto;
}
.news .news-articles article.news-item .date {
  font-size: 0.8em;
}
.news .news-thumbnails {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}
.news .news-thumbnails a {
  background-color: var(--color-primary);
  border-radius: 50%;
  color: #000;
  display: block;
  line-height: 1rem;
  padding: 1rem;
  font-weight: bold;
}

.poster-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.poster-gallery a {
  display: block;
  border-radius: 0.2rem;
  overflow: hidden;
  width: calc(10% - 2rem);
}
.poster-gallery a img {
  display: block;
}

#poster-carousel a {
  border-radius: 0.2rem;
  display: block;
  overflow: hidden;
}
#poster-carousel img {
  display: block;
}

main section {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 6rem 0;
}
main section .section-title h2 img {
  max-height: 3.6rem;
}
main section.light {
  background-color: var(--section-light-color-background);
  color: var(--section-light-color-text);
}
main section.light a:not(.button) {
  color: var(--section-light-color-link);
}
main section.light a:not(.button):visited {
  color: var(--section-light-color-link-visited);
}
main section.light a:not(.button):hover {
  color: var(--section-light-color-link-hover);
}
main section.light a:not(.button):active {
  color: var(--section-light-color-link-active);
}
main section.dark {
  background-color: var(--section-dark-color-background);
  color: var(--section-dark-color-text);
}
main section.dark a:not(.button) {
  color: var(--section-dark-color-link);
}
main section.dark a:not(.button):visited {
  color: var(--section-dark-color-link-visited);
}
main section.dark a:not(.button):hover {
  color: var(--section-dark-color-link-hover);
}
main section.dark a:not(.button):active {
  color: var(--section-dark-color-link-active);
}

#showtimes-widget .showtimes-widget__header {
  margin-bottom: 2rem;
}
#showtimes-widget .showtimes-widget__header h3 {
  margin-bottom: 2rem;
  font-size: 2.4rem;
}
@media only screen and (min-width: 40rem) {
  #showtimes-widget .showtimes-widget__header h3 {
    font-size: 2.4rem;
  }
}
#showtimes-widget .showtimes-widget__header form {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0 0 4rem;
}
#showtimes-widget .showtimes-widget__header form div {
  width: 100%;
}
#showtimes-widget .showtimes-widget__header form label {
  font-size: 1rem;
  text-transform: uppercase;
}
#showtimes-widget .showtimes-widget__header form input {
  margin: 0;
}
#showtimes-widget .showtimes-widget__header form input[type=submit] {
  width: 100%;
}
@media only screen and (min-width: 40rem) {
  #showtimes-widget .showtimes-widget__header form {
    flex-direction: row;
  }
  #showtimes-widget .showtimes-widget__header form input[type=submit] {
    width: auto;
  }
}
#showtimes-widget .showtimes-widget__dates ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
#showtimes-widget .showtimes-widget__dates ul li {
  margin: 0;
}
#showtimes-widget .showtimes-widget__dates ul a {
  display: block;
  margin: 0;
  padding: 0 1rem;
}
#showtimes-widget .showtimes-widget__theaters {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media only screen and (min-width: 40rem) {
  #showtimes-widget .showtimes-widget__theaters {
    grid-template-columns: 1fr 1fr;
  }
}
#showtimes-widget article {
  background-color: #fff;
  border: 1px solid #606c76;
  border-radius: 0.5rem;
  color: #212529;
  padding: 2rem;
}
#showtimes-widget article:last-child {
  margin: 0;
}
#showtimes-widget article .theater-name {
  margin: 0;
}
#showtimes-widget article .theater-meta {
  color: #606c76;
  font-size: 0.8em;
}
#showtimes-widget article .showtimes-widget__theaters__single__times {
  margin-top: 2rem;
}
#showtimes-widget article .showtimes-widget__theaters__single__times h5 {
  margin: 0 0 1rem;
}
#showtimes-widget article .showtimes-widget__theaters__single__times ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}
#showtimes-widget article .showtimes-widget__theaters__single__times ul li {
  margin: 0;
}
#showtimes-widget article .showtimes-widget__theaters__single__times ul .button {
  margin: 0;
}
#showtimes-widget article .showtimes-widget__theaters__single__times ul:last-child {
  margin: 0;
}

.dark .showtimes-widget__header form input[type=text], .dark .showtimes-widget__header form input[type=date] {
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
}

.social-list {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-list li {
  margin: 0;
  padding: 0;
}
.social-list a {
  color: #fff;
  display: block;
  padding: 0.5rem;
  transition: 0.2s ease color;
}
.social-list a:hover {
  color: var(--color-primary);
}

.theaters tbody {
  max-height: 40rem;
  overflow-y: scroll;
}

@media only screen and (min-width: 40rem) {
  .datatable-table > tbody > tr > td, .datatable-table > tbody > tr > th, .datatable-table > tfoot > tr > td, .datatable-table > tfoot > tr > th, .datatable-table > thead > tr > td, .datatable-table > thead > tr > th {
    padding: 12px 10px !important;
  }
}
@media only screen and (max-width: 40rem) {
  #theater-table thead {
    display: none;
  }
  #theater-table tbody {
    display: block;
  }
  #theater-table tr {
    all: unset;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid lightgray;
    border-radius: 1rem;
    margin: 0 auto 1rem;
    padding: 1rem;
    gap: 0 2rem;
  }
  #theater-table tr td {
    all: unset;
    font-size: 0.8em;
    text-align: right;
  }
  #theater-table tr td:first-child {
    display: flex;
    grid-row: 1/3;
    font-size: 1em;
    text-align: left;
    align-items: center;
  }
  #theater-table tr td:last-child {
    font-weight: bold;
  }
}
#theater-table thead a {
  color: var(--color-black);
}

#theater-table {
  margin-bottom: 0;
}
#theater-table .dma {
  height: 0;
  width: 0;
  display: block;
  overflow: hidden;
}

.datatable-wrapper .datatable-input {
  background-color: #fff;
}

main section.dark a.datatable-sorter, main section.dark #theater-table thead a {
  color: var(--color-white);
}
main section.dark .datatable-pagination .datatable-active a {
  background-color: var(--color-primary);
  color: var(--color-white);
}
main section.dark .datatable-sorter::after {
  border-bottom: 4px solid #FFF;
  border-top: 4px solid transparent;
  top: 0px;
}
main section.dark .datatable-sorter::before {
  border-top: 4px solid #FFF;
  bottom: 0px;
}

.section-title {
  text-align: center;
  margin: 0 0 6rem;
}
.section-title small {
  font-size: 2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.subheading {
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

.d-mobile {
  display: block;
}
@media only screen and (min-width: 40rem) {
  .d-mobile {
    display: none;
  }
}

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

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

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

.m-0 {
  margin: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-2 {
  margin-bottom: 2rem;
}

.mb-6 {
  margin-bottom: 6rem;
}

.no-wrap {
  display: inline-block;
}

.circle {
  border-radius: 100%;
}

.font-weight-normal {
  font-weight: normal;
}

.vendor-list {
  list-style: none;
  margin: 0 0 6rem;
  padding: 0;
  gap: 1rem;
  display: grid;
  grid-template-columns: 1fr;
}
.vendor-list:last-child {
  margin: 0;
}
@media only screen and (min-width: 40rem) {
  .vendor-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 60rem) {
  .vendor-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.vendor-list li {
  margin: 0;
  padding: 0;
}
.vendor-list li a {
  line-height: 1.2em;
  margin: 0;
  padding: 0;
}
.vendor-list li .vendor-button {
  border-radius: 0.5rem;
  display: flex;
  font-size: 1.2rem;
  font-weight: bold;
  height: auto;
  text-align: left;
  overflow: hidden;
  text-transform: none;
}
.vendor-list li .vendor-button span {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  font-size: 2rem;
  justify-content: center;
  text-transform: uppercase;
  width: 2.5em;
}
.vendor-list li .vendor-button span img, .vendor-list li .vendor-button span svg {
  max-width: 20px;
}
.vendor-list li .vendor-button div {
  display: block;
  padding: 1rem 1.5rem;
}
.vendor-list li .vendor-button div b {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.2rem;
}
.vendor-list li .vendor-button div > small {
  display: block;
  font-size: 1rem;
  font-weight: lighter;
}

.video-container {
  border-radius: 0.5rem;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container .video-container object,
.video-container .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-gallery-thumbnails {
  display: flex;
  gap: 2rem;
  justify-content: center;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  flex-wrap: wrap;
}
.video-gallery-thumbnails .thumbnail {
  margin: 0;
  border: 1px solid var(--color-tertiary);
  border-radius: 0.2rem;
  cursor: pointer;
  overflow: hidden;
  width: calc(25% - 2rem);
}
.video-gallery-thumbnails .thumbnail img {
  display: block;
}
.video-gallery-thumbnails .thumbnail.is-active {
  border-color: var(--color-primary);
}

.splide .splide__video__play {
  padding: 3rem;
}

#studio-ghibli-fest-2023 {
  text-align: center;
}/*# sourceMappingURL=style.css.map */