/*
// Converts pixels to viewport width units (vw)
@function px($pixels, $context: (1920 / 100)) {
    @return ($pixels / $context) * 1vw;
}
*/
/* Font sizes (base size 16, modular scale 2, 6 intervals),
 * Commented out sizes are not currently used */
.animation--wiggle {
  animation: wiggle 0.5s ease-in-out;
}

.animation--fade-in {
  animation: fade-in 0.25s ease-in-out;
}

.animation--fade-out {
  animation: fade-out 0.25s ease-in-out;
}

@keyframes wiggle {
  0% {
    transform: translateX(0rem);
  }
  10% {
    transform: translateX(-3px);
  }
  30% {
    transform: translateX(3px);
  }
  50% {
    transform: translateX(-3px);
  }
  70% {
    transform: translateX(3px);
  }
  90% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0rem);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(3.125rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0rem);
  }
}

@keyframes phase-in {
  0% {
    transform: rotateX(90deg) rotateY(0) rotateZ(0);
  }
  30% {
    transform: rotateX(91deg) rotateY(0) rotateZ(0);
  }
  70% {
    transform: rotateX(0deg) rotateY(0) rotateZ(0);
  }
  85% {
    transform: rotateX(0deg) scale(1.1);
  }
  100% {
    transform: rotateX(0deg) scale(1);
  }
}

@keyframes phase-out {
  0% {
    transform: rotateX(0deg) rotateY(0) rotateZ(0);
  }
  50% {
    transform: rotateX(91deg) rotateY(0) rotateZ(0);
  }
  75% {
    transform: rotateX(90.5deg) scaleX(0.1);
  }
  100% {
    transform: rotateX(90deg) scaleX(0.1);
  }
}

/*
 * Applies padding and other formatting to all CSS styles that include the
 * naming convention 'rarity--' in all components

[class*='rarity--'] // Default

*/
.rarity--0,
.rarity--1,
.rarity--2,
.rarity--3 {
  padding: 0.3125rem 0.9375rem 0.3125rem 1.5625rem;
  color: black;
  border-radius: 0.3125rem;
  display: flex;
  flex-direction: row;
}

.rarity--0 .rarity__icon,
.rarity--1 .rarity__icon,
.rarity--2 .rarity__icon,
.rarity--3 .rarity__icon {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1.25rem;
  background-size: contain;
  border-top-left-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
}

.rarity--0.rarity--condensed,
.rarity--1.rarity--condensed,
.rarity--2.rarity--condensed,
.rarity--3.rarity--condensed {
  padding: 0.1875rem 0.5rem 0.1875rem 1.25rem;
}

.rarity--0.rarity--condensed .rarity__icon,
.rarity--1.rarity--condensed .rarity__icon,
.rarity--2.rarity--condensed .rarity__icon,
.rarity--3.rarity--condensed .rarity__icon {
  width: 0.9375rem;
}

.rarity--0 {
  background: #aec51b;
}

.rarity--1 {
  background: #1ea6d7;
}

.rarity--2 {
  background: #b776ce;
}

.rarity--3 {
  background: #eb4321;
}

.element__border-image {
  position: absolute;
  top: 0;
  right: 1px;
  bottom: 0;
  left: 0;
  z-index: 5;
  width: 34rem;
  height: 100%;
  padding-top: 52.5%;
  border-width: 0.625rem;
  border-style: solid;
  border-color: transparent;
  border-image-slice: 24;
  border-image-width: 1.5rem;
  border-image-outset: 0;
  border-image-repeat: stretch;
}

.element__border-highlight {
  position: absolute;
  top: -0.0625rem;
  right: -0.0625rem;
  bottom: -0.0625rem;
  left: -0.0625rem;
  z-index: 5;
  width: 34rem;
  height: 100%;
  padding-top: 55.25%;
  border-width: 0.25rem;
  border-style: solid;
  border-left-color: var(--color-highlight);
  border-right-color: var(--color-highlight);
  border-top-color: var(--color-highlight);
  border-bottom-color: var(--color-highlight);
  opacity: 0;
}

.loading-modal-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #222222;
}

.loading-modal-container .loading-modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 37.5rem;
}

.loading-modal-container .loading-modal > * {
  align-items: center;
  margin: 0.9375rem 0;
}

.loading-popup .loading-spinner {
  position: relative;
}

.loading-popup .loading-spinner .loading-spinner__main {
  width: 12.5rem;
  height: 12.5rem;
}

.loading-popup .loading-spinner .loading-spinner__ball {
  position: absolute;
  top: 4.29167rem;
  right: -1.5625rem;
  width: 4.16667rem;
  height: 4.16667rem;
  transform-origin: -8.33333rem;
  animation: spinner 3.5s infinite;
}

.loading-popup .loading-message {
  animation-name: loading-message;
  animation-timing-function: ease-in-out;
  animation-duration: 400ms;
  animation-fill-mode: forwards;
  color: #fefefe;
}

@keyframes loading-message {
  0% {
    margin-top: 0rem;
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    margin-top: 9.375rem;
    opacity: 1;
  }
}

@keyframes spinner {
  0% {
    transform: translateX(0rem) rotate(0);
  }
  15% {
    transform: translateX(0rem) rotate(0);
  }
  30% {
    transform: translateX(4.16667rem) rotate(0);
  }
  90% {
    transform: translateX(4.16667rem) rotate(360deg);
  }
  100% {
    transform: translateX(0) rotate(360deg);
  }
}

.button {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  cursor: pointer;
}

.button.button--primary p {
  padding: 1.25rem 0.5rem;
}

.button.button--secondary p {
  padding: 0.5rem 1rem 0.5rem 0.5rem;
}

.button:hover .button__text div {
  background-color: #00c396;
}

.button:hover .button__text p {
  color: black;
  text-shadow: none;
}

.button:hover .button__color {
  background-color: #00c396;
}

.button__text {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0.75rem 0 0.75rem;
  pointer-events: none;
}

.button__text div {
  width: 2rem;
  height: 2rem;
  margin-right: 0.75rem;
  mask-position: 50% 50%;
  mask-repeat: no-repeat;
  mask-size: 100%;
  background-color: white;
  transition-timing-function: ease-out;
  transition-duration: 250ms;
  transition-property: background-color;
}

.button__text p {
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition-timing-function: ease-out;
  transition-duration: 250ms;
  transition-property: color;
  text-shadow: none !important;
}

.button__color {
  background-color: #00f6bd;
  transition-timing-function: ease-out;
  transition-duration: 250ms;
  transition-property: background-color;
}

.button__shape {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  pointer-events: none;
}

.shape__right {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.shape__middle {
  flex: 1 0 auto;
}

.shape__top-right {
  flex: 1 0 auto;
  width: 0.5rem;
}

.shape__bottom-right {
  flex: 0 0 auto;
  overflow: hidden;
  width: 0.5rem;
  height: 0.5rem;
}

.shape__bottom-right div {
  width: 100%;
  height: 100%;
  transform: translateX(-0.25rem) translateY(-0.25rem) rotateZ(45deg) scale(1.4142);
  transform-origin: 50% 50%;
}

/* Reset Chrome and Gameface user agent defaults */
* {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  line-height: 1;
}

*:focus {
  outline: none;
}

html,
body {
  height: 100vh;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: normal;
}

/* Default properties applied to all elements */
* {
  flex: 0 0 auto;
}

body {
  overflow: hidden;
  color: white;
  font-family: "Roboto", "Stadia";
}

button {
  background: none;
}

/* COLOUR BLIND FILTERS */
.cb-protanopia {
  filter: coh-color-matrix(0.567, 0.433, 0, 0, 0, 0.558, 0.442, 0, 0, 0, 0, 0.242, 0.758, 0, 0, 0, 0, 0, 1, 0);
}

.cb-protanomaly {
  filter: coh-color-matrix(0.817, 0.183, 0, 0, 0, 0.333, 0.667, 0, 0, 0, 0, 0.125, 0.875, 0, 0, 0, 0, 0, 1, 0);
}

.cb-deuteranopia {
  filter: coh-color-matrix(0.625, 0.375, 0, 0, 0, 0.7, 0.3, 0, 0, 0, 0, 0.3, 0.7, 0, 0, 0, 0, 0, 1, 0);
}

.cb-deuteranomaly {
  filter: coh-color-matrix(0.8, 0.2, 0, 0, 0, 0.258, 0.742, 0, 0, 0, 0, 0.142, 0.858, 0, 0, 0, 0, 0, 1, 0);
}

.cb-tritanopia {
  filter: coh-color-matrix(0.95, 0.05, 0, 0, 0, 0, 0.433, 0.567, 0, 0, 0, 0.475, 0.525, 0, 0, 0, 0, 0, 1, 0);
}

.cb-tritanomaly {
  filter: coh-color-matrix(0.967, 0.033, 0, 0, 0, 0, 0.733, 0.267, 0, 0, 0, 0.183, 0.817, 0, 0, 0, 0, 0, 1, 0);
}

.cb-achromatopsia {
  filter: coh-color-matrix(0.299, 0.587, 0.114, 0, 0, 0.299, 0.587, 0.114, 0, 0, 0.299, 0.587, 0.114, 0, 0, 0, 0, 0, 1, 0);
}

.cb-achromatomaly {
  filter: coh-color-matrix() 0.618, 0.32, 0.062, 0, 0, 0.163, 0.775, 0.062, 0, 0, 0.163, 0.32, 0.516, 0, 0, 0, 0, 0, 1, 0;
}

/* Font weights are broken in Gameface as of (22.10.2019).
 * This workaround from Coherent uses @font-face with the src property pointing to the font file.
 * Note that the src file path is relative to the global style sheet and not components.
 */
@font-face {
  font-family: 'Dharma Gothic E';
  src: url("../fonts/DharmaGothicE-Regular.otf");
}

@font-face {
  font-family: 'Dharma Gothic M';
  src: url("../fonts/DharmaGothicM-Regular.otf");
}

@font-face {
  font-family: 'Industry Book';
  src: url("../fonts/Industry-Book.otf");
}

@font-face {
  font-family: 'Industry Medium';
  src: url("../fonts/Industry-Medium.otf");
}

@font-face {
  font-family: 'Industry Bold';
  src: url("../fonts/Industry-Bold.otf");
}

@font-face {
  font-family: 'Roboto';
  src: url("../fonts/Roboto-Regular.ttf");
}

@font-face {
  font-family: 'Stadia';
  src: url("../fonts/Rubik-Regular.ttf");
}

/*
// Final fonts
DHARMA-GOTHIC-M     REGULAR                     128, 60
DHARMA-GOTHIC-E     REGULAR                     128, 80, 60, 45, 36, 30
INDUSTRY            BOOK, MEDIUM, BOLD          45,  30, 20, 18
ROBOTO              REGULAR                     20,  16
*/
/* Type sizes
 * Commented out sizes are not currently used */
.text-sans-0 {
  font-size: 1rem;
}

.text-square-1, footer .footer-content *, .floating .floating__content p, .floating.floating--comic .floating__content a span, .text-square-1--500, .text-square-1--700, footer .footer-content a, body * {
  font-size: 1.125rem;
}

.text-condensed-2, .text-square-2, .comic-description *, .comic .button__text h2, .comic .button__text h2 p,
.comic .button__text h2 span,
.comic .button__text h2 svg, .button.button--secondary p, .text-square-2--500, .text-square-2--700, .blog .blog__articles .blog__article .blog__article__info .blog__article__read-more, .blog .blog__read-more, .text-sans-2, .notice .notice__content .notice__text p {
  font-size: 1.25rem;
}

/*

%text-size-3 {
    font-size: $t3;

    @include media($bp-4k) {
        // Fine tune;
    }
}

%text-size-4 {
    font-size: $t4;

    @include media($bp-4k) {
        // Fine tune;
    }
}

*/
.text-condensed-5, .text-square-5, .text-square-5--500, body h3, .text-square-5--700, .notice .notice__content .notice__text h5 {
  font-size: 1.8125rem;
}

/*

%text-size-6 {
    font-size: $t6;

    @include media($bp-4k) {
        // Fine tune;
    }
}

*/
.button__text p, .text-condensed-7, .text-square-7, .text-square-7--500, .text-square-7--700 {
  font-size: 2.25rem;
}

/*

%text-size-8 {
    font-size: $t8;

    @include media($bp-4k) {
        // Fine tune;
    }
}

*/
.button.button--primary p, .text-condensed-9, body .h4,
body h4, .text-square-9, .text-square-9--500, .text-square-9--700, body h1, body h2 {
  font-size: 2.8125rem;
}

/*

%text-size-10 {
    font-size: $t10;

    @include media($bp-4k) {
        // Fine tune;
    }
}

%text-size-11 {
    font-size: $t11;

    @include media($bp-4k) {
        // Fine tune;
    }
}

*/
.text-compressed-12, .text-condensed-12 {
  font-size: 4rem;
}

/*

%text-size-13 {
    font-size: $t13;

    @include media($bp-4k) {
        // Fine tune;
    }
}

*/
.text-condensed-14 {
  font-size: 5.0625rem;
}

/*

%text-size-15 {
    font-size: $t15;

    @include media($bp-4k) {
        // Fine tune;
    }
}

%text-size-16 {
    font-size: $t16;

    @include media($bp-4k) {
        // Fine tune;
    }
}

%text-size-17 {
    font-size: $t17;

    @include media($bp-4k) {
        // Fine tune;
    }
}

*/
.text-compressed-18, .text-condensed-18 {
  font-size: 8rem;
}

.text-compressed-18 {
  font-family: "Dharma Gothic M", "Stadia";
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-compressed-12 {
  font-family: "Dharma Gothic M", "Stadia";
  text-transform: uppercase;
  letter-spacing: 0.5rem;
}

.text-condensed-18 {
  font-family: "Dharma Gothic E", "Stadia";
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-condensed-14 {
  font-family: "Dharma Gothic E", "Stadia";
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-condensed-12 {
  font-family: "Dharma Gothic E", "Stadia";
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.button.button--primary p, .text-condensed-9, body .h4,
body h4 {
  font-family: "Dharma Gothic E", "Stadia";
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.button__text p, .text-condensed-7 {
  font-family: "Dharma Gothic E", "Stadia";
  line-height: 2.625rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-condensed-5 {
  font-family: "Dharma Gothic E", "Stadia";
  line-height: 2.125rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-condensed-2 {
  font-family: "Dharma Gothic E", "Stadia";
  line-height: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-square-9 {
  font-family: "Industry Book", "Stadia";
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-square-9--500 {
  font-family: "Industry Medium", "Stadia";
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-square-9--700, body h1, body h2 {
  font-family: "Industry Bold", "Stadia";
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-square-7 {
  font-family: "Industry Book", "Stadia";
  line-height: 2.625rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-square-7--500 {
  font-family: "Industry Medium", "Stadia";
  line-height: 2.625rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-square-7--700 {
  font-family: "Industry Bold", "Stadia";
  line-height: 2.625rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-square-5 {
  font-family: "Industry Book", "Stadia";
  line-height: 2.125rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-square-5--500, body h3 {
  font-family: "Industry Medium", "Stadia";
  line-height: 2.125rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-square-5--700, .notice .notice__content .notice__text h5 {
  font-family: "Industry Bold", "Stadia";
  line-height: 2.125rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-square-2, .comic-description *, .comic .button__text h2, .comic .button__text h2 p,
.comic .button__text h2 span,
.comic .button__text h2 svg {
  font-family: "Industry Book", "Stadia";
  line-height: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.button.button--secondary p, .text-square-2--500,
.comic .button__text h2 span {
  font-family: "Industry Medium", "Stadia";
  line-height: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-square-2--700, .blog .blog__articles .blog__article .blog__article__info .blog__article__read-more, .blog .blog__read-more {
  font-family: "Industry Bold", "Stadia";
  line-height: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-square-1, footer .footer-content *, .floating .floating__content p, .floating.floating--comic .floating__content a span {
  font-family: "Industry Book", "Stadia";
  line-height: 1.375rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-square-1--500 {
  font-family: "Industry Medium", "Stadia";
  line-height: 1.375rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-square-1--700, footer .footer-content a {
  font-family: "Industry Bold", "Stadia";
  line-height: 1.375rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.text-sans-0 {
  font-family: "Roboto", "Stadia";
  line-height: 1.25rem;
}

body * {
  font-family: "Roboto", "Stadia";
  line-height: 1.375rem;
}

.text-sans-2, .notice .notice__content .notice__text p {
  font-family: "Roboto", "Stadia";
  line-height: 1.5rem;
}

/* GLOBAL FONT CLASSES */
/* HELPER CLASSES */
.text--uppercase {
  text-transform: uppercase;
}

.text--lowercase {
  text-transform: lowercase;
}

.text--regular {
  text-transform: none;
}

.text--muted {
  color: #dadada;
}

.text--blue {
  color: #00ffd4;
  text-shadow: 0 0 20px rgba(0, 234, 180, 0.65);
  letter-spacing: 2px;
}

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

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

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

/* Effects */
.button__text p {
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1), -1px 1px 0px rgba(0, 0, 0, 0.1), -1px -1px 0px rgba(0, 0, 0, 0.1), 1px -1px 0px rgba(0, 0, 0, 0.1);
}

.shape__middle, .shape__top-right, .shape__bottom-right div {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.25);
}

/* Screen graphics */
.graphics {
  position: absolute;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.graphics__stripes-large {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100vw;
}

.stripes-large {
  width: 15.9375rem;
  height: 8rem;
  mask-image: linear-gradient(180deg, #ffffff 0%, transparent 100%);
  mask-position: 0 0;
  mask-repeat: no-repeat;
  mask-size: 100%;
  background-image: linear-gradient(90deg, #00f6bd 4rem, transparent 4rem, transparent 6rem);
  background-position: 0 0;
  background-size: 6rem 8rem;
  background-repeat: repeat-x;
  opacity: 1;
}

.stripes-large__left {
  margin-left: -4rem;
  transform: skewX(45deg);
  transform-origin: left top;
}

.stripes-large__right {
  margin-right: -4rem;
  transform: skewX(-45deg);
  transform-origin: right top;
}

.graphics__stripes-small {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.stripes-small {
  position: absolute;
  height: 0.75rem;
}

.stripes-small__top {
  top: 10.74074vh;
  left: 2.5vw;
  width: 95vw;
  transform-origin: left bottom;
  transform: skewX(-45deg);
}

.stripes-small__left {
  top: 23.7037vh;
  left: 0.83333vw;
  width: 52.59259vh;
  transform-origin: left bottom;
  transform: rotateZ(90deg) skewX(-45deg);
}

.stripes-small__pattern {
  position: absolute;
  height: 100%;
  width: 0;
  /*
    background-image: linear-gradient(
        90deg,
        transparent 0,
        transparent px(1),
        $bluegreen px(1),
        $bluegreen px(2),
        transparent px(2),
        transparent px(3)
    );
    */
  background-image: linear-gradient(90deg, transparent 0, transparent 0.03125rem, #00f6bd 0.09375rem, transparent 0.15625rem, transparent 0.1875rem);
  background-position: 0 0;
  background-size: 0.25rem 100%;
}

/*
// Converts pixels to viewport width units (vw)
@function px($pixels, $context: (1920 / 100)) {
    @return ($pixels / $context) * 1vw;
}
*/
/* Font sizes (base size 16, modular scale 2, 6 intervals),
 * Commented out sizes are not currently used */
.animation--wiggle {
  animation: wiggle 0.5s ease-in-out;
}

.animation--fade-in {
  animation: fade-in 0.25s ease-in-out;
}

.animation--fade-out {
  animation: fade-out 0.25s ease-in-out;
}

@keyframes wiggle {
  0% {
    transform: translateX(0rem);
  }
  10% {
    transform: translateX(-3px);
  }
  30% {
    transform: translateX(3px);
  }
  50% {
    transform: translateX(-3px);
  }
  70% {
    transform: translateX(3px);
  }
  90% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0rem);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(3.125rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0rem);
  }
}

@keyframes phase-in {
  0% {
    transform: rotateX(90deg) rotateY(0) rotateZ(0);
  }
  30% {
    transform: rotateX(91deg) rotateY(0) rotateZ(0);
  }
  70% {
    transform: rotateX(0deg) rotateY(0) rotateZ(0);
  }
  85% {
    transform: rotateX(0deg) scale(1.1);
  }
  100% {
    transform: rotateX(0deg) scale(1);
  }
}

@keyframes phase-out {
  0% {
    transform: rotateX(0deg) rotateY(0) rotateZ(0);
  }
  50% {
    transform: rotateX(91deg) rotateY(0) rotateZ(0);
  }
  75% {
    transform: rotateX(90.5deg) scaleX(0.1);
  }
  100% {
    transform: rotateX(90deg) scaleX(0.1);
  }
}

body {
  overflow: auto;
}

body p {
  line-height: 1.5;
  margin-bottom: 0;
}

body a {
  color: white;
}

body a:hover {
  text-decoration: none;
  color: white;
}

body h2,
body h3,
body h4 {
  color: #00f6bd;
  text-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.9);
  line-height: 1.2;
}

body h1 {
  line-height: 1.2;
}

@media (max-width: 800px) {
  body h1 {
    font-size: 1.8125rem;
  }
}

@media (max-width: 800px) {
  body h2 {
    font-size: 1.8125rem;
  }
}

@media (max-width: 800px) {
  body h3 {
    font-size: 1.25rem;
    margin-top: 0;
  }
}

body h1,
body h2 {
  line-height: 1;
}

@media (min-width: 2500px) {
  body h1,
  body h2 {
    font-size: 4rem;
  }
}

body h3 {
  line-height: 1.3;
}

@media (min-width: 2500px) {
  body h3 {
    font-size: 2.25rem;
  }
}

body h4 {
  font-size: 4rem;
  line-height: 1;
}

@media (min-width: 2500px) {
  body h4 {
    font-size: 5.6875rem;
  }
}

body p,
body li,
body strong,
body em,
body a,
body u,
body .emphasis {
  font-size: 1.25rem;
}

@media (min-width: 2500px) {
  body p,
  body li,
  body strong,
  body em,
  body a,
  body u,
  body .emphasis {
    font-size: 1.5625rem;
    line-height: 1.5;
  }
}

body .emphasis {
  margin-top: 1.25rem;
}

@media (min-width: 2500px) {
  body .emphasis {
    margin-top: 3.125rem;
  }
}

.main header {
  position: relative;
  max-height: 100vh;
  overflow: hidden;
}

@media (min-width: 1400px) {
  .main header {
    min-height: 800px;
  }
}

@media (max-width: 1024px) {
  .main header {
    height: auto;
  }
}

.main header picture,
.main header img {
  width: 100%;
}

.main header .hero--back,
.main header .hero--fore,
.main header .hero--logo {
  display: none;
}

.main header .hero {
  display: block;
  width: 100%;
}

@media (min-width: 1024px) {
  .main header .hero--back,
  .main header .hero--fore,
  .main header .hero--logo {
    display: block;
    width: 100%;
  }
  .main header .hero {
    display: none;
  }
}

.main header .hero--fore {
  position: absolute;
  top: 5vh;
  left: 0;
  right: 0;
  bottom: 0;
}

@media screen and (min-width: 2000px) {
  .main header .hero--fore {
    top: 3vh;
  }
}

.main header .hero--logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}

.main .hero-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
}

@media (max-width: 767px) {
  .main .hero-video {
    display: none;
  }
}

section {
  position: relative;
}

section.comic-description {
  border-top: 0.3125rem solid white;
  background-color: #222;
}

section.trailer {
  border-top: 0.3125rem solid white;
  border-bottom: 0.3125rem solid white;
  background-image: url("../images/screenshots/PropHunt_01.jpg");
  background-size: cover;
}

section.trailer:after {
  content: ' ';
  background: rgba(0, 0, 0, 0.75);
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
}

section.trailer * {
  z-index: 2;
}

@media (min-width: 2000px) {
  section.trailer .uk-container {
    max-width: 1200px;
  }
}

section.about {
  background-image: url(../images/screenshots/CitySprint_02.jpg);
  background-color: rgba(0, 0, 0, 0.8);
  background-size: cover;
  background-blend-mode: darken;
}

section.about h2,
section.about h3 {
  text-align: center;
}

section.about h3 {
  margin-top: 0;
  margin-bottom: 3.125rem;
}

section.about * {
  z-index: 2;
}

section.about * {
  z-index: 3;
  position: relative;
}

@media (min-width: 2500px) {
  section.about .button--secondary p {
    font-size: 1.8125rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

section.characters, section.games, section.create, section.comic, section.blog, section.community, section.battlepass {
  border-top: 0.3125rem solid white;
}

section.characters .community__reel,
section.characters .characters__reel,
section.characters .create__reel,
section.characters .comic__reel,
section.characters .games__reel,
section.characters .battlepass__reel, section.games .community__reel,
section.games .characters__reel,
section.games .create__reel,
section.games .comic__reel,
section.games .games__reel,
section.games .battlepass__reel, section.create .community__reel,
section.create .characters__reel,
section.create .create__reel,
section.create .comic__reel,
section.create .games__reel,
section.create .battlepass__reel, section.comic .community__reel,
section.comic .characters__reel,
section.comic .create__reel,
section.comic .comic__reel,
section.comic .games__reel,
section.comic .battlepass__reel, section.blog .community__reel,
section.blog .characters__reel,
section.blog .create__reel,
section.blog .comic__reel,
section.blog .games__reel,
section.blog .battlepass__reel, section.community .community__reel,
section.community .characters__reel,
section.community .create__reel,
section.community .comic__reel,
section.community .games__reel,
section.community .battlepass__reel, section.battlepass .community__reel,
section.battlepass .characters__reel,
section.battlepass .create__reel,
section.battlepass .comic__reel,
section.battlepass .games__reel,
section.battlepass .battlepass__reel {
  min-height: 31.25rem;
}

@media (max-width: 800px) {
  section.characters .community__reel,
  section.characters .characters__reel,
  section.characters .create__reel,
  section.characters .comic__reel,
  section.characters .games__reel,
  section.characters .battlepass__reel, section.games .community__reel,
  section.games .characters__reel,
  section.games .create__reel,
  section.games .comic__reel,
  section.games .games__reel,
  section.games .battlepass__reel, section.create .community__reel,
  section.create .characters__reel,
  section.create .create__reel,
  section.create .comic__reel,
  section.create .games__reel,
  section.create .battlepass__reel, section.comic .community__reel,
  section.comic .characters__reel,
  section.comic .create__reel,
  section.comic .comic__reel,
  section.comic .games__reel,
  section.comic .battlepass__reel, section.blog .community__reel,
  section.blog .characters__reel,
  section.blog .create__reel,
  section.blog .comic__reel,
  section.blog .games__reel,
  section.blog .battlepass__reel, section.community .community__reel,
  section.community .characters__reel,
  section.community .create__reel,
  section.community .comic__reel,
  section.community .games__reel,
  section.community .battlepass__reel, section.battlepass .community__reel,
  section.battlepass .characters__reel,
  section.battlepass .create__reel,
  section.battlepass .comic__reel,
  section.battlepass .games__reel,
  section.battlepass .battlepass__reel {
    min-height: 18.75rem;
  }
}

@media (min-width: 1800px) {
  section.characters .community__reel,
  section.characters .characters__reel,
  section.characters .create__reel,
  section.characters .comic__reel,
  section.characters .games__reel,
  section.characters .battlepass__reel, section.games .community__reel,
  section.games .characters__reel,
  section.games .create__reel,
  section.games .comic__reel,
  section.games .games__reel,
  section.games .battlepass__reel, section.create .community__reel,
  section.create .characters__reel,
  section.create .create__reel,
  section.create .comic__reel,
  section.create .games__reel,
  section.create .battlepass__reel, section.comic .community__reel,
  section.comic .characters__reel,
  section.comic .create__reel,
  section.comic .comic__reel,
  section.comic .games__reel,
  section.comic .battlepass__reel, section.blog .community__reel,
  section.blog .characters__reel,
  section.blog .create__reel,
  section.blog .comic__reel,
  section.blog .games__reel,
  section.blog .battlepass__reel, section.community .community__reel,
  section.community .characters__reel,
  section.community .create__reel,
  section.community .comic__reel,
  section.community .games__reel,
  section.community .battlepass__reel, section.battlepass .community__reel,
  section.battlepass .characters__reel,
  section.battlepass .create__reel,
  section.battlepass .comic__reel,
  section.battlepass .games__reel,
  section.battlepass .battlepass__reel {
    min-height: 37.5rem;
  }
}

@media (min-width: 2500px) {
  section.characters .community__reel,
  section.characters .characters__reel,
  section.characters .create__reel,
  section.characters .comic__reel,
  section.characters .games__reel,
  section.characters .battlepass__reel, section.games .community__reel,
  section.games .characters__reel,
  section.games .create__reel,
  section.games .comic__reel,
  section.games .games__reel,
  section.games .battlepass__reel, section.create .community__reel,
  section.create .characters__reel,
  section.create .create__reel,
  section.create .comic__reel,
  section.create .games__reel,
  section.create .battlepass__reel, section.comic .community__reel,
  section.comic .characters__reel,
  section.comic .create__reel,
  section.comic .comic__reel,
  section.comic .games__reel,
  section.comic .battlepass__reel, section.blog .community__reel,
  section.blog .characters__reel,
  section.blog .create__reel,
  section.blog .comic__reel,
  section.blog .games__reel,
  section.blog .battlepass__reel, section.community .community__reel,
  section.community .characters__reel,
  section.community .create__reel,
  section.community .comic__reel,
  section.community .games__reel,
  section.community .battlepass__reel, section.battlepass .community__reel,
  section.battlepass .characters__reel,
  section.battlepass .create__reel,
  section.battlepass .comic__reel,
  section.battlepass .games__reel,
  section.battlepass .battlepass__reel {
    min-height: 50rem;
  }
}

section.characters .community__reel, section.games .community__reel, section.create .community__reel, section.comic .community__reel, section.blog .community__reel, section.community .community__reel, section.battlepass .community__reel {
  min-height: 37.5rem;
}

@media (max-width: 800px) {
  section.characters .community__reel, section.games .community__reel, section.create .community__reel, section.comic .community__reel, section.blog .community__reel, section.community .community__reel, section.battlepass .community__reel {
    min-height: 25rem;
  }
}

@media (min-width: 1800px) {
  section.characters .community__reel, section.games .community__reel, section.create .community__reel, section.comic .community__reel, section.blog .community__reel, section.community .community__reel, section.battlepass .community__reel {
    min-height: 43.75rem;
  }
}

@media (min-width: 2500px) {
  section.characters .community__reel, section.games .community__reel, section.create .community__reel, section.comic .community__reel, section.blog .community__reel, section.community .community__reel, section.battlepass .community__reel {
    min-height: 56.25rem;
  }
}

section.characters .uk-container, section.games .uk-container, section.create .uk-container, section.comic .uk-container, section.blog .uk-container, section.community .uk-container, section.battlepass .uk-container {
  background: #222;
}

@media (min-width: 1024px) {
  section.characters .uk-container, section.games .uk-container, section.create .uk-container, section.comic .uk-container, section.blog .uk-container, section.community .uk-container, section.battlepass .uk-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: rgba(34, 34, 34, 0.85);
    max-width: 30%;
    padding-left: 15vw;
  }
}

@media (min-width: 1024px) {
  section.characters.comic .uk-container, section.games.comic .uk-container, section.create.comic .uk-container, section.comic.comic .uk-container, section.blog.comic .uk-container, section.community.comic .uk-container, section.battlepass.comic .uk-container {
    max-width: 35%;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  section.characters.comic-soon .uk-container, section.games.comic-soon .uk-container, section.create.comic-soon .uk-container, section.comic.comic-soon .uk-container, section.blog.comic-soon .uk-container, section.community.comic-soon .uk-container, section.battlepass.comic-soon .uk-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(34, 34, 34, 0.95);
    max-width: none;
    width: initial;
    padding: 2rem 15vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  section.characters.comic-soon .uk-container *, section.games.comic-soon .uk-container *, section.create.comic-soon .uk-container *, section.comic.comic-soon .uk-container *, section.blog.comic-soon .uk-container *, section.community.comic-soon .uk-container *, section.battlepass.comic-soon .uk-container * {
    text-align: center;
  }
}

section.characters .characters__reel, section.games .characters__reel, section.create .characters__reel, section.comic .characters__reel, section.blog .characters__reel, section.community .characters__reel, section.battlepass .characters__reel {
  background-image: url("../images/character-reel.png");
  background-repeat: repeat-x;
  background-size: cover;
  animation: bgScrollLeft 150s linear infinite;
  width: 100%;
}

section.characters .games__reel, section.games .games__reel, section.create .games__reel, section.comic .games__reel, section.blog .games__reel, section.community .games__reel, section.battlepass .games__reel {
  background-image: url("../images/games-reel.jpg");
  background-repeat: repeat-x;
  background-size: cover;
  animation: bgScroll 400s linear infinite;
  width: 100%;
}

section.characters .create__reel, section.games .create__reel, section.create .create__reel, section.comic .create__reel, section.blog .create__reel, section.community .create__reel, section.battlepass .create__reel {
  background-image: url("../images/screenshots/Editor_03.jpg");
  background-size: cover;
  width: 100%;
}

section.characters .community__reel, section.games .community__reel, section.create .community__reel, section.comic .community__reel, section.blog .community__reel, section.community .community__reel, section.battlepass .community__reel {
  background-image: url("../images/screenshots/PumpkinBattle.jpg");
  background-size: cover;
  width: 100%;
}

section.characters .battlepass__reel, section.games .battlepass__reel, section.create .battlepass__reel, section.comic .battlepass__reel, section.blog .battlepass__reel, section.community .battlepass__reel, section.battlepass .battlepass__reel {
  background-image: url("../images/battlepass--reel.jpg");
  background-repeat: repeat-x;
  background-size: cover;
  animation: bgScroll 400s linear infinite;
  width: 100%;
}

section.characters .comic__reel, section.games .comic__reel, section.create .comic__reel, section.comic .comic__reel, section.blog .comic__reel, section.community .comic__reel, section.battlepass .comic__reel {
  background-size: cover;
  width: 100%;
  background-position: right top;
}

section.characters .comic__reel.comic1, section.games .comic__reel.comic1, section.create .comic__reel.comic1, section.comic .comic__reel.comic1, section.blog .comic__reel.comic1, section.community .comic__reel.comic1, section.battlepass .comic__reel.comic1 {
  background-image: url("../images/comic1.jpg");
}

section.characters .comic__reel.comic2, section.games .comic__reel.comic2, section.create .comic__reel.comic2, section.comic .comic__reel.comic2, section.blog .comic__reel.comic2, section.community .comic__reel.comic2, section.battlepass .comic__reel.comic2 {
  background-image: url("../images/comic2.jpg");
}

section.characters .comic__reel.comic3, section.games .comic__reel.comic3, section.create .comic__reel.comic3, section.comic .comic__reel.comic3, section.blog .comic__reel.comic3, section.community .comic__reel.comic3, section.battlepass .comic__reel.comic3 {
  background-image: url("../images/comic3.jpg");
}

section.characters .comic__reel.comic4, section.games .comic__reel.comic4, section.create .comic__reel.comic4, section.comic .comic__reel.comic4, section.blog .comic__reel.comic4, section.community .comic__reel.comic4, section.battlepass .comic__reel.comic4 {
  background-image: url("../images/comic4.jpg");
}

section.characters .comic__reel.comic5, section.games .comic__reel.comic5, section.create .comic__reel.comic5, section.comic .comic__reel.comic5, section.blog .comic__reel.comic5, section.community .comic__reel.comic5, section.battlepass .comic__reel.comic5 {
  background-image: url("../images/comic5.jpg");
}

section.characters .comic__reel.comic6, section.games .comic__reel.comic6, section.create .comic__reel.comic6, section.comic .comic__reel.comic6, section.blog .comic__reel.comic6, section.community .comic__reel.comic6, section.battlepass .comic__reel.comic6 {
  background-image: url("../images/comic6.jpg");
}

section.characters .comic__reel.comic-soon, section.games .comic__reel.comic-soon, section.create .comic__reel.comic-soon, section.comic .comic__reel.comic-soon, section.blog .comic__reel.comic-soon, section.community .comic__reel.comic-soon, section.battlepass .comic__reel.comic-soon {
  background-image: url("../images/comic-soon.png");
  min-height: 12.5rem;
}

section.create .uk-container, section.community .uk-container, section.battlepass .uk-container {
  background: #222;
}

@media (min-width: 1024px) {
  section.create .uk-container, section.community .uk-container, section.battlepass .uk-container {
    position: absolute;
    top: 0;
    right: 0;
    left: initial;
    bottom: 0;
    background: rgba(34, 34, 34, 0.85);
    max-width: 30%;
    padding-left: 2.5rem;
    padding-right: 15vw;
  }
}

@keyframes bgScroll {
  0% {
    background-position: 1000% 0;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes bgScrollLeft {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1000% 0;
  }
}

.video-player {
  position: relative;
  padding-bottom: 56.25%;
  z-index: 5;
  /* 16:9 */
}

.video-player .video-player__frame {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .video-player {
    display: none;
  }
}

footer {
  background: #222;
  border-top: 0.3125rem solid white;
}

@media (min-width: 2500px) {
  footer .uk-container {
    max-width: none;
    padding-left: 60px;
    padding-right: 60px;
  }
}

footer .footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 1024px) {
  footer .footer-content {
    flex-direction: column;
    align-items: center;
  }
}

footer .footer-content .footer-content__wrapper {
  flex-grow: 2;
}

footer .footer-content .footer__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0.625rem 0;
}

@media (max-width: 1024px) {
  footer .footer-content .footer__row {
    flex-direction: column;
    margin: 0;
  }
  footer .footer-content .footer__row > div {
    margin: 0.625rem 0.3125rem;
  }
}

footer .footer-content .footer__row .footer__links .footer-links {
  transition: all 150ms;
}

footer .footer-content .footer__row .footer__links .footer-links:hover {
  color: #00f6bd;
}

footer .footer-content .footer__row .footer__socials a * {
  transition: all 150ms;
}

footer .footer-content .footer__row .footer__socials a span {
  display: none;
}

footer .footer-content .footer__row .footer__socials a:hover * {
  fill: #00f6bd;
}

footer .footer-content .footer__row .footer__links,
footer .footer-content .footer__row .footer__logos,
footer .footer-content .footer__row .footer__socials {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

footer .footer-content .footer__row .footer__links > *,
footer .footer-content .footer__row .footer__logos > *,
footer .footer-content .footer__row .footer__socials > * {
  margin-right: 1.25rem;
  margin-bottom: 1.25rem;
}

footer .footer-content .footer__row .footer__links > *:last-child,
footer .footer-content .footer__row .footer__logos > *:last-child,
footer .footer-content .footer__row .footer__socials > *:last-child {
  margin-right: 0;
}

footer .footer-content .footer__logos img {
  width: 3.125rem;
}

footer .footer-content .footer__legal {
  text-align: left;
  font-size: 0.8rem;
  margin: 0;
}

footer .footer-content .footer__legal span {
  font-size: 0.8rem;
}

@media (max-width: 1024px) {
  footer .footer-content .footer__legal {
    text-align: center;
  }
}

footer .social-button--medium {
  max-width: 1.875rem;
  max-height: 1.875rem;
}

footer .esrb,
footer .pegi,
footer .usk {
  display: none;
  margin-left: 5rem;
  flex-basis: 10rem;
  justify-content: center;
}

@media (max-width: 1024px) {
  footer .esrb,
  footer .pegi,
  footer .usk {
    margin-left: 0;
  }
}

footer .pegi {
  flex-basis: 6rem;
}

footer .pegi > img {
  width: 6rem;
  height: 8rem;
}

footer .pegi .content {
  display: flex;
  flex-direction: column;
  margin-left: 0.5rem;
}

footer .pegi .content img {
  width: 3.75rem;
  height: 3.75rem;
}

footer .pegi .content img:first-child {
  margin-bottom: 0.5rem;
}

@media (max-width: 1024px) {
  footer .pegi {
    max-width: 6rem;
    margin: 1.5rem 1rem;
  }
}

footer .usk {
  flex-basis: 8rem;
}

@media (max-width: 1024px) {
  footer .usk {
    margin: 1.5rem 1rem;
  }
}

footer .esrb {
  display: flex;
}

@media (max-width: 1024px) {
  footer .esrb img {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    max-width: 15rem;
    height: 100%;
    width: 100%;
  }
}

footer .unreal .footer-content {
  padding-top: 0;
}

footer .unreal .footer-content .footer__row {
  justify-content: space-between;
  width: 100%;
}

footer .unreal img {
  width: 5rem;
  margin-right: 1.25rem;
}

@media (max-width: 1024px) {
  footer .unreal img {
    margin-right: 0;
    margin-bottom: 0.9375rem;
  }
}

footer .unreal img.image--greyscale {
  width: 3rem;
  margin-right: 0;
}

@media (max-width: 1024px) {
  footer .unreal img.image--greyscale {
    margin-top: 2.5rem;
    width: 4rem;
  }
}

footer .unreal .unreal-legal {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@media (max-width: 1024px) {
  footer .unreal .unreal-legal {
    flex-direction: column;
  }
  footer .unreal .unreal-legal p {
    text-align: center;
  }
}

footer .unreal .copy {
  display: flex;
  flex-direction: column;
}

footer .unreal .copy p {
  font-size: 0.8rem;
  margin: 0;
}

article * {
  color: black;
}

article a {
  color: black;
  text-decoration: underline;
}

article a:hover {
  text-decoration: none;
  color: black;
}

article h2,
article h3,
article h4 {
  color: black;
  text-shadow: none;
  line-height: 1.2;
}

article ul,
article li {
  line-height: 1.4;
}

.subpage__logo {
  max-width: 25rem;
}

.eula {
  padding-top: 0;
}

.eula h3 {
  margin-top: 3.125rem;
}

.read-more-button {
  position: fixed;
  left: 50%;
  bottom: 30px;
  display: none;
  animation: bob .75s infinite both;
  z-index: 2;
}

.read-more-button .rmb {
  background: white;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: block;
  text-align: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.25s;
}

.read-more-button .rmb:hover {
  background: #e6e6e6;
}

.read-more-button svg {
  position: relative;
  top: 0.85rem;
  width: 1.5rem;
}

.read-more-button svg * {
  fill: black;
}

@keyframes bob {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.3125rem);
  }
  100% {
    transform: translateY(0);
  }
}

.floating {
  position: fixed;
  top: 6.875rem;
  right: 0;
  z-index: 100;
  transition: top 0.25s;
}

.floating * {
  z-index: 100;
}

.floating .floating__content {
  padding: 0.9375rem 1.5625rem;
  background: rgba(0, 0, 0, 0.9);
  border-top-left-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.floating .floating__socials > a {
  margin-right: 0.625rem;
}

.floating .floating__socials > a span {
  display: none;
}

.floating .floating__socials > a svg {
  height: 1.5rem;
  width: 1.5rem;
}

.floating .floating__socials > a svg * {
  transition: fill .15s;
}

.floating .floating__socials > a:hover svg * {
  fill: #00f6bd;
}

.floating .floating__socials > a:last-child {
  margin-right: 0;
}

@media (max-width: 770px) {
  .floating {
    position: static;
  }
  .floating .floating__content {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .floating .floating__content .floating__socials {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
  }
}

.floating.floating--comic {
  top: 11.5625rem;
}

.floating.floating--comic .floating__content a {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.floating.floating--comic .floating__content a span {
  text-transform: uppercase;
}

.floating.floating--comic .floating__content svg {
  margin-right: 1rem;
}

.floating.floating--comic:hover .floating__content {
  background: #00f6bd;
}

.floating.floating--comic:hover .floating__content span {
  color: black;
}

.floating.floating--comic:hover .floating__content svg * {
  fill: black;
}

.notice {
  background: #ff5733;
  z-index: 5;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 5px solid white;
  display: none;
}

.notice .notice__wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 950px) {
  .notice .notice__wrapper {
    flex-direction: column;
  }
}

.notice .notice__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1 1 0%;
}

.notice .notice__content .notice__icon {
  width: 3.75rem;
  height: 3.75rem;
  margin-right: 1.5625rem;
}

.notice .notice__content .notice__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 0%;
}

.notice .notice__content .notice__text h5 {
  font-size: 1.4375rem;
  margin: 0;
  color: white;
}

.notice .notice__content .notice__text p {
  margin: 0;
  color: white;
  white-space: normal;
}

.watch-button {
  display: flex;
  justify-content: center;
}

@media (min-width: 767px) {
  .watch-button {
    display: none;
  }
}

.watch-button .button {
  border: 2px solid transparent;
}

.watch-button .button .button__shape .button__color {
  background: #00f6bd;
}

.watch-button .button svg {
  width: 3.125rem;
  height: 3.125rem;
  margin-right: 0.6875rem;
  margin-left: 0.9375rem;
  opacity: 0.9;
}

.watch-button .button svg * {
  fill: #000;
  transition: fill .25s;
}

.watch-button .button p {
  margin-top: 0;
}

.watch-button .button:hover {
  border-color: #00f6bd;
}

.watch-button .button:hover .button__shape .button__color {
  background: black;
}

.watch-button .button:hover .button__text svg * {
  fill: #00f6bd;
}

.watch-button .button:hover .button__text p {
  color: #00f6bd;
}

.notice__button,
.watch-button {
  position: relative;
}

@media (max-width: 950px) {
  .notice__button,
  .watch-button {
    margin-top: 1.5625rem;
  }
}

.notice__button .button__shape,
.watch-button .button__shape {
  position: static;
}

.notice__button .button__shape .button__color,
.watch-button .button__shape .button__color {
  background: white;
}

.notice__button .button,
.watch-button .button {
  overflow: hidden;
  position: relative;
}

.notice__button .button:hover .button__color,
.watch-button .button:hover .button__color {
  background: #e6e6e6;
}

.sheen {
  position: absolute;
  top: 0;
  left: -20%;
  width: 2.625rem;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  z-index: 10;
  transform: skewX(-10deg);
  animation: sheen 5s infinite;
}

@keyframes sheen {
  0% {
    left: -25%;
  }
  20%,
  100% {
    left: 125%;
  }
}

.four-oh-four main {
  position: relative;
  background-image: url("https://crayta.com/CraytaDesert.jpg");
  background-color: rgba(0, 0, 0, 0.75);
  background-size: cover;
  background-blend-mode: darken;
  min-height: 100vh;
}

.four-oh-four main * {
  color: black;
  text-align: center;
}

.four-oh-four .overlay * {
  color: white;
}

.four-oh-four .overlay .links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 2.5rem;
}

.four-oh-four .overlay .links a {
  margin-right: 1.25rem;
  text-decoration: underline;
}

.four-oh-four .overlay .links a:last-child {
  margin-right: 0;
}

.four-oh-four ul {
  list-style: none;
}

.four-oh-four ul li {
  padding: 0;
}

.stream-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.75rem 1.5rem;
  margin: 0.25rem 0;
  background-image: linear-gradient(-45deg, transparent 0.5rem, black 0.5rem);
  transition: all 150ms;
  text-transform: uppercase;
}

.stream-link * {
  transition: all 150ms;
}

.stream-link svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 1.25rem;
}

.stream-link:hover {
  background-image: linear-gradient(-45deg, transparent 0.5rem, #00f6bd 0.5rem);
}

.stream-link:hover * {
  color: black;
  fill: black;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.hero-overlay .launch-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.hero-overlay h2 {
  color: white;
}

@media (min-width: 768px) {
  .hero-overlay a {
    margin-bottom: 4rem;
  }
}

@media (min-width: 2500px) and (min-height: 1500px) {
  .hero-overlay a {
    margin-bottom: 15rem;
  }
}

.hero-overlay a:first-child {
  margin-right: 2rem;
}

.hero-overlay a .button__text {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background-image: linear-gradient(-45deg, transparent 0.5rem, black 0.5rem);
  transition: all 150ms;
}

.hero-overlay a .button__text * {
  transition: all 150ms;
}

.hero-overlay a .button__text svg {
  width: 4rem;
  height: 4rem;
  margin-right: 1.5rem;
}

.hero-overlay a:hover .button__text {
  background-image: linear-gradient(-45deg, transparent 0.5rem, #00f6bd 0.5rem);
}

.hero-overlay a:hover .button__text * {
  color: black;
  fill: black;
}

.hero-overlay p {
  margin: 0;
  font-size: 2.5rem;
  line-height: normal;
  color: white;
  text-shadow: none;
  position: relative;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .hero-overlay {
    position: static;
    transform: none;
    background: #222;
  }
  .hero-overlay * {
    text-align: center;
  }
  .hero-overlay h2 {
    margin-top: 2rem;
    margin-bottom: 0;
  }
  .hero-overlay .launch-buttons {
    flex-direction: column;
    width: 90%;
    margin: 1.5rem 0;
  }
  .hero-overlay .launch-buttons a:first-child {
    margin-right: 0;
    margin-bottom: 1.5rem;
  }
  .hero-overlay .launch-buttons a .button__text * {
    fill: black;
    color: black;
  }
  .hero-overlay .launch-buttons a .button__text svg {
    width: 3rem;
    height: 3rem;
    margin-right: 0.5rem;
  }
  .hero-overlay .launch-buttons a .button__text p {
    line-height: 1;
  }
  .hero-overlay .launch-buttons h2 span,
  .hero-overlay .launch-buttons p span {
    position: static;
  }
  .hero-overlay .launch-buttons a {
    margin-bottom: 0;
    width: 100%;
  }
  .hero-overlay .launch-buttons a .button__text {
    width: auto;
    background: #00f6bd;
  }
  .hero-overlay .launch-buttons a .button__text h2 {
    max-width: 80%;
    text-align: left;
  }
  .hero-overlay .launch-buttons a .button__text svg {
    margin-right: 1rem;
  }
  .hero-overlay .launch-buttons:hover .button__text, .hero-overlay .launch-buttons:focus .button__text, .hero-overlay .launch-buttons:active .button__text {
    background: #fb5d39;
  }
}

@media (min-width: 3500px) {
  .hero-overlay a .button__text h2 {
    font-size: 4rem;
  }
  .hero-overlay a .button__text svg {
    transform: scale(1.25);
    margin-right: 2rem;
  }
}

.blog {
  background-image: url("../images/screenshots/CastleCrusade_01.jpg");
  background-size: cover;
  padding: 5rem 2rem;
  display: none;
}

.blog h4 {
  z-index: 3;
  position: relative;
  margin-left: 1.5rem;
}

.blog:after {
  content: ' ';
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

.blog * {
  position: relative;
  z-index: 2;
}

.blog .blog__articles {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1024px) {
  .blog .blog__articles {
    flex-direction: column;
  }
}

.blog .blog__articles .blog__article {
  flex-basis: 28%;
  margin: 0 3%;
  position: relative;
}

@media (max-width: 1024px) {
  .blog .blog__articles .blog__article {
    flex-basis: 100%;
    margin: 0;
    margin-bottom: 4rem;
  }
}

.blog .blog__articles .blog__article .blog__article__image {
  background-size: cover;
  background-position: center;
  padding-top: 56.3%;
}

.blog .blog__articles .blog__article .blog__article__info {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  padding: 1rem 1.5rem;
  padding-bottom: 2rem;
}

.blog .blog__articles .blog__article .blog__article__info h3, .blog .blog__articles .blog__article .blog__article__info p {
  color: white;
}

.blog .blog__articles .blog__article .blog__article__info a {
  text-decoration: none;
}

.blog .blog__articles .blog__article .blog__article__info .blog__article__read-more {
  position: absolute;
  bottom: 1rem;
  left: 1.5rem;
  background: linear-gradient(-45deg, transparent 0.3125rem, #00f6bd 0.3125rem);
  padding: 0.5rem 1rem;
  color: black;
  transition: background 150ms;
}

.blog .blog__articles .blog__article .blog__article__info .blog__article__read-more:hover, .blog .blog__articles .blog__article .blog__article__info .blog__article__read-more:focus {
  background: linear-gradient(-45deg, transparent 0.3125rem, #00c396 0.3125rem);
}

.blog .blog__articles .blog__article .blog__article__image {
  position: relative;
}

.blog .blog__articles .blog__article .article__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.blog .blog__articles .blog__article .article__link span {
  display: none;
}

.blog .blog__read-more {
  background: linear-gradient(-45deg, transparent 0.3125rem, #00f6bd 0.3125rem);
  padding: 0.75rem 1.25rem;
  color: black;
}

.community__content {
  padding-bottom: 2.5rem;
}

.community__content ul li {
  line-height: 1.25;
  margin-bottom: 1rem;
}

.community__content ul li a {
  font-size: 1.5rem;
  text-decoration: underline;
}

@media (min-width: 1800px) {
  .community__content ul li a {
    font-size: 1.75rem;
  }
}

@media (min-width: 2500px) {
  .community__content ul li a {
    font-size: 2rem;
  }
}

body .cc-window.cc-banner {
  padding: 0.5rem 1rem;
}

.cc-message {
  font-size: 1rem;
}

.cc-message .cc-link {
  font-size: 1rem;
}

.comic-description figure {
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.5;
  padding-left: 1.5rem;
  border-left: 0.5rem solid white;
  margin-bottom: 0.75rem;
}

.comic-description figcaption {
  font-size: 0.9rem;
  margin-top: 0;
  font-style: italic;
}

.comic-description img {
  margin: 2rem 0;
}

.comic-description p {
  text-transform: none;
  line-height: 1.5;
}

.comic-description .comic-explain {
  padding-top: 3rem;
  margin-top: 2rem;
  border-top: 0.25rem solid #00f6bd;
}

.comic-description .button__text {
  position: relative;
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background-image: linear-gradient(-45deg, transparent 0.5rem, #00f6bd 0.5rem);
  transition: all 150ms;
  pointer-events: all;
  margin: 1.5rem 0;
}

.comic-description .button__text h2 {
  margin: 0;
  font-size: 2rem;
  line-height: normal;
  color: black;
  text-shadow: none;
}

.comic-description .button__text * {
  transition: all 150ms;
}

.comic-description .button__text:hover {
  transform: scale(1.025);
  background-image: linear-gradient(-45deg, transparent 0.5rem, #fb5d39 0.5rem);
}

.comic-description .button__text:hover * {
  color: white;
}

.comic-description .credits {
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
}

.comic-description .credits > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 1rem;
}

.comic-description .credits > div > p {
  flex: 1 1 0%;
}

.comic-description .credits > div > p:first-child {
  max-width: 15rem;
  font-weight: bold;
}

.comic-description .credits p {
  margin: 0;
  text-align: left;
}

.comic .button__text {
  position: relative;
  display: inline-block;
  padding: 1rem 1.5rem;
  background-image: linear-gradient(-45deg, transparent 0.5rem, #00f6bd 0.5rem);
  transition: all 150ms;
  pointer-events: all;
  margin: 1.5rem 0;
}

.comic .button__text h2 {
  margin: 0;
  line-height: 1.5;
  color: black;
  text-shadow: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.comic .button__text h2 * {
  transition: all 150ms;
  line-height: 1.25 !important;
}

.comic .button__text h2 svg {
  opacity: 0.9;
}

.comic .button__text h2 svg * {
  fill: black;
}

.comic .button__text h2 span {
  width: 100%;
}

.comic .button__text h2 p,
.comic .button__text h2 span,
.comic .button__text h2 svg {
  margin-right: 0.3125rem;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2rem;
}

.comic .button__text h2 svg {
  margin-right: 1rem;
}

.comic .button__text * {
  transition: all 150ms;
}

.comic .button__text:hover {
  transform: scale(1.025);
  background-image: linear-gradient(-45deg, transparent 0.5rem, #fb5d39 0.5rem);
}

.comic .button__text:hover * {
  color: white;
}

.comic .button__text:hover svg * {
  fill: white;
}

.text--dark {
  color: #1b1b1b;
  position: relative;
  margin-bottom: 5rem;
  padding-bottom: 5rem;
}

.text--dark a {
  color: #1b1b1b;
  text-decoration: underline;
}

.text--dark a:hover {
  color: #1b1b1b;
  text-decoration: underline;
}

.text--dark h1,
.text--dark h2 {
  color: #1b1b1b;
  text-shadow: none;
}

.text--dark:after {
  width: 30vw;
  height: 0.15rem;
  background: rgba(0, 0, 0, 0.15);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.fbka a {
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5rem;
  text-decoration: underline;
  color: rgba(0, 0, 0, 0.75);
}

.signature {
  font-weight: 600;
  margin-bottom: 0;
  margin-top: 2rem;
}

.signature em {
  color: #1b1b1b;
}

.signature ~ p {
  margin-top: 0;
  font-size: 0.85rem;
}

.faq {
  margin-bottom: 4rem;
}

.faq p:first-child {
  font-weight: bold;
}

body {
  overflow-x: hidden;
}
/*# sourceMappingURL=crayta.css.map */