@font-face {
  font-family: delirium-ncv;
  src: url("../fonts/delirium-ncv.ttf") format("truetype");
}
@font-face {
  font-family: delirium-neon-ncv;
  src: url("../fonts/delirium-neon-ncv.ttf") format("truetype");
}
@font-face {
  font-family: printbold;
  src: url("../fonts/printbold.ttf") format("truetype");
}
:root {
  --digital: delirium-ncv, sans-serif;
  --digital-neon: delirium-neon-ncv, sans-serif;
  --font-def: printbold, sans-serif;
  --theme: #ff0048;
  --color-1: #250024;
  --color-2: #ffd400;
  font-size: 16px;
}

@media only screen and (min-width: 1200px) {
  :root {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  :root {
    font-size: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  :root {
    font-size: 14px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  :root {
    font-size: 13px;
  }
}
@media only screen and (max-width: 575px) {
  :root {
    font-size: 12px;
  }

  #anchor-top {
    right: 1.5rem !important;
    bottom: 1.5rem !important;
  }
}
#anchor-top {
  position: fixed;
  display: none;
  right: 2.5rem;
  bottom: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--theme);
  color: #fff;
  text-align: center;
  line-height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
}

.no-bullet {
  list-style: none !important;
}

.cur-def {
  cursor: default !important;
}

.text-bold {
  font-weight: bold !important;
}

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

/*****   Padding   *****/
.no-pad {
  padding: 0 !important;
}

.pad-v-2 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.pad-btm-0-25 {
  padding-bottom: 0.25rem;
}

.pad-btm-0-5 {
  padding-bottom: 0.5rem;
}

.pad-btm-1 {
  padding-bottom: 1rem !important;
}

.pad-btm-2 {
  padding-bottom: 2rem !important;
}

.pad-btm-3 {
  padding-bottom: 3rem !important;
}

.pad-btm-4 {
  padding-bottom: 4rem !important;
}

.pad-btm-5 {
  padding-bottom: 5rem;
}

.pad-top-2 {
  padding-top: 2rem;
}

.pad-top-2-5 {
  padding-top: 2.5rem !important;
}

.pad-top-4 {
  padding-top: 4rem !important;
}

.pad-top-5 {
  padding-top: 5rem !important;
}

.pad-top-10 {
  padding-top: 10rem !important;
}

.pad-top-15-p {
  padding-top: 15% !important;
}

.pad-right-0 {
  padding-right: 0;
}

.pad-right-1 {
  padding-right: 1rem;
}

.pad-right-2 {
  padding-right: 2rem;
}

.pad-l-0-5 {
  padding-left: 0.5rem;
}

.pad-left-1 {
  padding-left: 1rem !important;
}

.pad-left-2 {
  padding-left: 2rem !important;
}

.pad-left-3 {
  padding-left: 3rem;
}

.pad-left-4 {
  padding-left: 4rem !important;
}

.pad-0-5 {
  padding: 0.5rem;
}

/*****   Margin   *****/
.no-mar {
  margin: 0 !important;
}

.mar-v-1 {
  margin: 1rem 0 !important;
}

.mar-0-auto {
  display: block;
  margin: 0 auto;
}

.mar-btm-0 {
  margin-bottom: 0 !important;
}

.mar-btm-1 {
  margin-bottom: 1rem;
}

.mar-btm-2 {
  margin-bottom: 2rem;
}

.mar-btm-3 {
  margin-bottom: 3rem;
}

.mar-top-vw {
  margin-top: 10vw !important;
}

.mar-top-0 {
  margin-top: 0 !important;
}

.mar-top-1 {
  margin-top: 1rem;
}

.mar-top-2 {
  margin-top: 2rem !important;
}

.mar-top-3 {
  margin-top: 3rem;
}

.mar-top-0-5 {
  margin-top: 0.5rem;
}

.mar-top-0-25 {
  margin-top: 0.25rem;
}

.mar-v-1-5 {
  margin: 1.5rem 0;
}

.mar-v-5 {
  margin: 5rem 0;
}

.mar-r-1 {
  margin-right: 1rem !important;
}

.mar-r-2 {
  margin-right: 2rem !important;
}

html, body {
  font-family: var(--font-def);
  color: #fff;
}

body {
  background-color: var(--color-1);
  position: relative;
  padding-bottom: 35rem;
}

.pos-rel {
  position: relative;
}

.overflow-h {
  overflow: hidden !important;
}

.no-border {
  border: 0 !important;
}

.scroll-down-sm {
  top: auto !important;
  bottom: 1rem !important;
}

@keyframes scroll_icon {
  0% {
    bottom: 1rem;
  }
  100% {
    bottom: 0;
  }
}
@keyframes scroll_img {
  0% {
    transform: translateY(0);
  }
  1% {
    transform: translateY(0);
  }
  48% {
    transform: translateY(calc(-100% + 624.375px));
  }
  50% {
    transform: translateY(calc(-100% + 624.375px));
  }
  52% {
    transform: translateY(calc(-100% + 624.375px));
  }
  99% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scroll_img_lg {
  0% {
    transform: translateY(0);
  }
  1% {
    transform: translateY(0);
  }
  48% {
    transform: translateY(calc(-100% + 523.125px));
  }
  50% {
    transform: translateY(calc(-100% + 523.125px));
  }
  52% {
    transform: translateY(calc(-100% + 523.125px));
  }
  99% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scroll_img_md {
  0% {
    transform: translateY(0);
  }
  1% {
    transform: translateY(0);
  }
  48% {
    transform: translateY(calc(-100% + 388.125px));
  }
  50% {
    transform: translateY(calc(-100% + 388.125px));
  }
  52% {
    transform: translateY(calc(-100% + 388.125px));
  }
  99% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes phn_1 {
  from {
    top: 75%;
  }
  to {
    top: -5rem;
  }
}
@keyframes phn_2 {
  from {
    top: 75%;
  }
  to {
    top: -4rem;
    transform: rotate(-10deg) scale(1.1);
  }
}
@keyframes phn_3 {
  from {
    top: 75%;
  }
  to {
    top: -5rem;
  }
}
@keyframes phn_4 {
  from {
    top: 75%;
  }
  to {
    top: -4rem;
  }
}
@keyframes phn_5 {
  from {
    top: 75%;
  }
  to {
    top: -5rem;
    transform: rotate(10deg) scale(1.1);
  }
}
@keyframes phn_6 {
  from {
    top: 75%;
  }
  to {
    top: -9rem;
  }
}
@keyframes zoom {
  0% {
    width: 100%;
    height: 100%;
  }
  50% {
    width: 150%;
    height: 150%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
@keyframes rounded_anim {
  0% {
    height: 100%;
  }
  50% {
    height: 0;
    border-radius: 0;
  }
  100% {
    height: 100%;
  }
}
#mobile-msg {
  position: absolute;
  display: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 2rem;
  width: 100%;
  padding: 0 1.5rem;
}
#mobile-msg img {
  width: 10rem;
  height: auto;
}

header #logo {
  position: fixed;
  left: 0.5rem;
  top: 0.75rem;
  width: 6rem;
  height: auto;
  z-index: 9999;
}

main #block-1 {
  position: relative;
  overflow: hidden;
}
main #block-1 .social-container {
  position: absolute;
  display: inline-flex;
  right: 1rem;
  top: 1.5rem;
}
main #block-1 .social-container .rounded-corner {
  position: relative;
  display: inline-flex;
  color: #fff;
  font-size: 1.2rem;
  padding: 0.5rem 1.5rem;
  border-radius: 1.4rem;
  font-weight: bold;
  text-decoration: none;
  margin: 0 1rem;
  overflow: hidden;
  align-items: center;
}
main #block-1 .social-container .rounded-corner .before, main #block-1 .social-container .rounded-corner .after {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: -1;
  transition: 0.5s;
}
main #block-1 .social-container .rounded-corner .before {
  background-color: var(--theme);
  top: 0;
}
main #block-1 .social-container .rounded-corner .after {
  background-color: #fff;
  top: 100%;
}
main #block-1 .social-container .rounded-corner:hover {
  color: var(--theme);
}
main #block-1 .social-container .rounded-corner:hover .before, main #block-1 .social-container .rounded-corner:hover .after {
  transform: translateY(-100%);
}
main #block-1 .social-container .icon {
  display: inline-flex;
  color: #fff;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  margin: 0 0.5rem;
}
main #block-1 .social-container .icon:hover {
  text-decoration: none;
}
main #block-1 .left-container {
  position: relative;
  width: 60%;
  background-image: url("../../images/block-1/bg-left.png");
  background-repeat: no-repeat;
  background-size: cover;
}
main #block-1 .left-container #face-parallax {
  width: 100%;
  height: auto;
}
main #block-1 .left-container #scroll-down {
  position: absolute;
  top: calc(100vh - 6.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 4rem;
  height: 6.5rem;
  cursor: pointer;
}
main #block-1 .left-container #scroll-1 {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
}
main #block-1 .left-container #scroll-2 {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: auto;
  animation: scroll_icon 1s linear infinite;
}
main #block-1 .right-container {
  position: absolute;
  right: 0;
  top: 10%;
  width: 50%;
}
main #block-1 .right-container #name-parallax {
  width: 100%;
  height: auto;
}
main #logos {
  padding-top: 5rem;
  padding-bottom: 10rem;
}
main #logos .bg-smoke {
  background-image: url("../../images/logos/bg-smoke.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}
main #logos #abs-6 {
  position: absolute;
  left: 42%;
  top: -7%;
  width: 30%;
  height: auto;
}
main #logos #abs-7 {
  position: absolute;
  left: 75%;
  top: 5rem;
  width: 25%;
  height: auto;
}
main #logos .bg-side {
  background-image: url("../../images/logos/side.png");
  background-size: 100% auto;
  background-position: left top;
  padding: 0 !important;
}
main #logos .bg-lines {
  background-image: url("../../images/logos/lines.png");
  background-size: 100% auto;
  background-position: left top;
}
main #magazines {
  position: relative;
  background-color: #ffd400;
  min-height: 75vw;
}
main #magazines #abs-1 {
  position: absolute;
  left: 2rem;
  top: -10rem;
  width: 40%;
  height: auto;
}
main #magazines #abs-2 {
  position: absolute;
  right: 2rem;
  top: -7rem;
  width: calc(60% - 4rem);
  height: auto;
}
main #magazines #abs-3 {
  position: absolute;
  left: -5rem;
  top: calc(55vw - 2rem);
  width: 30%;
  height: auto;
}
main #magazines #abs-4 {
  position: absolute;
  right: 0;
  top: calc(45vw - 9rem);
  width: 50%;
  height: auto;
  z-index: 2;
}
main #magazines #abs-mag {
  position: absolute;
  top: calc(55vw - 10rem);
  left: 0.5rem;
  width: 47%;
  height: auto;
}
main #magazines #abs-mag-above, main #magazines #abs-mag-below {
  font-size: 1.5rem;
  line-height: 1;
}
main #magazines #abs-mag-above {
  color: #000;
  margin-bottom: 1rem;
  padding-left: 1rem;
  position: relative;
}
main #magazines #abs-mag-above .underline-1 {
  position: absolute;
  right: 3rem;
  bottom: 0;
  background-color: var(--theme);
  height: 4px;
  border-radius: 2px;
  width: 1.5rem;
}
main #magazines #abs-mag-above .underline-2 {
  position: absolute;
  left: calc(100% - 1rem);
  bottom: 0;
  background-color: var(--theme);
  height: 4px;
  border-radius: 2px;
  width: 20rem;
  z-index: 1;
}
main #magazines #abs-mag-below {
  color: #000;
  text-align: right;
  margin-top: 1rem;
}
main #magazines #abs-mag-below .half-border {
  display: inline-block;
  position: relative;
  padding-bottom: 1rem;
}
main #magazines #abs-mag-below .half-border .half-underline {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--theme);
  height: 4px;
  border-radius: 2px;
  width: 40%;
}
main #manip {
  background-image: url("../../images/manip/bg-manip.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 15rem;
}
main #manip img {
  width: 100%;
  height: auto;
  margin: 0.75rem 0;
}
main #manip #manip-text-block {
  transform: translateY(-10rem);
}
main #manip .sec-text {
  font-size: 2rem;
  line-height: 1;
}
main #ui {
  width: 100%;
  overflow: hidden;
}
main #ui img {
  width: 100%;
  height: auto;
}
main #ui .heading {
  display: flex;
}
main #ui .heading .serial {
  font-size: 10rem;
  color: rgba(255, 255, 255, 0.2);
}
main #ui .heading .head-text {
  text-transform: uppercase;
  align-self: center;
  padding-left: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  z-index: 10;
}
main #ui .heading .pink-bg {
  background-color: var(--theme);
  padding: 0.25rem;
  cursor: pointer;
}
main #ui .serial {
  font-family: var(--digital);
}
main #ui .sec-text {
  font-size: 2rem;
  line-height: 1;
}
main #ui .ui-p {
  padding-top: 10rem;
  margin-top: 5rem;
}
main #ui .phn {
  top: 75%;
  position: relative;
  animation-duration: 0.75s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
main #ui #phn-2, main #ui #phn-5 {
  z-index: 5;
}
main #ui #ui-3 {
  margin-top: 0;
}
main #ui #ui-3, main #ui #ui-5 {
  background-image: url("../../images/ui/monitor-1.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
main #ui #ui-4 {
  background-image: url("../../images/ui/monitor-2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
main #ui #monitor-1, main #ui #monitor-2, main #ui #monitor-3 {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
}
main #ui #monitor-1 img, main #ui #monitor-2 img, main #ui #monitor-3 img {
  position: absolute;
  animation: scroll_img 70s linear infinite;
}
main #ui #monitor-1 img:hover, main #ui #monitor-2 img:hover, main #ui #monitor-3 img:hover {
  animation-play-state: paused;
}
main #ui .animate {
  position: absolute;
  right: -2rem;
  top: -2rem;
  width: 6rem;
  height: 6rem;
  z-index: 20;
}
main #ui .animate:after {
  content: '';
  position: absolute;
  background-image: radial-gradient(circle, #ff0048, rgba(255, 0, 72, 0));
  width: 100%;
  height: 100%;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  animation: zoom 2s linear infinite;
}
main #ui .monitor-stand {
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40vw;
}
main #dig-art {
  background-image: url("../../images/dig-art/bg-dig-art.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 10rem;
}
main #dig-art img {
  width: 100%;
  height: auto;
  margin: 0.75rem 0;
}
main #dig-art .abs-btm-2 {
  position: absolute;
  bottom: 2rem;
}
main #poster {
  position: relative;
}
main #poster #img-left-poster {
  position: absolute;
  width: 15%;
  height: auto;
  left: 0;
  top: 0;
}
main #poster #img-right-poster {
  position: absolute;
  width: 7%;
  height: auto;
  right: 0;
  top: 0;
}
main #poster img {
  width: 100%;
  height: auto;
}
main #poster .d-grid-cus {
  position: relative;
  top: -10rem;
  display: grid;
  grid-template: repeat(45, 1fr)/repeat(19, 1fr);
  grid-gap: 10px;
  padding: 10px;
}
main #poster .d-grid-cus img {
  border: 0.4rem solid #fff;
}
main #poster .pos-1 {
  grid-column: 1 / 9;
  grid-row: 1 / 11;
}
main #poster .pos-2 {
  grid-column: 9 / 15;
  grid-row: 2 / 9;
}
main #poster .pos-3 {
  grid-column: 15 / 20;
  grid-row: 3 / 9;
  align-self: end;
}
main #poster .pos-4 {
  grid-column: 9 / 20;
  grid-row: 9 / 14;
}
main #poster .pos-5 {
  grid-column: 1 / 8;
  grid-row: 12 / 18;
}
main #poster .pos-6 {
  grid-column: 8 / 12;
  grid-row: 14 / 19;
  align-self: center;
}
main #poster .pos-7 {
  grid-column: 12 / 20;
  grid-row: 14 / 24;
  align-self: center;
}
main #poster .pos-8 {
  grid-column: 1 / 12;
  grid-row: 19 / 25;
}
main #poster .pos-9 {
  grid-column: 12 / 20;
  grid-row: 24 / 33;
}
main #poster .pos-10 {
  grid-column: 1 / 11;
  grid-row: 25 / 31;
}
main #poster .pos-bg-1 {
  grid-column: 1 / 4;
  grid-row: 31 / 33;
}
main #poster .pos-11 {
  grid-column: 1 / 9;
  grid-row: 33 / 42;
}
main #poster .pos-12 {
  grid-column: 9 / 20;
  grid-row: 33 / 38;
  align-self: end;
}
main #poster .pos-13 {
  grid-column: 9 / 14;
  grid-row: 38 / 45;
}
main #poster .pos-14 {
  grid-column: 14 / 20;
  grid-row: 38 / 46;
}
main #poster .pos-15 {
  grid-column: 1 / 5;
  grid-row: 42 / 44;
}
main #poster .pos-15 img {
  width: 75%;
}
main #thank {
  margin-top: -10rem;
}

footer {
  background-image: url("../../images/footer.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left bottom;
  background-size: auto 34.25rem;
  background-color: #131313;
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 0;
  height: 34.25rem;
}
footer img {
  height: 35rem;
  width: auto;
}
footer .footer-content {
  float: right;
  display: inline-block;
  text-align: right;
  padding: 2rem;
}
footer .navigate a {
  font-family: var(--digital);
  color: var(--theme);
  font-size: 3rem;
  text-transform: uppercase;
}
footer .navigate a:hover {
  text-decoration: none;
}
footer .dots .dot {
  display: inline-flex;
  margin: 1rem 0.5rem;
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  align-items: center;
  justify-content: center;
  color: #131313;
}
footer .dots .dot:hover {
  text-decoration: none;
}
footer .developer {
  font-size: 1.5rem;
  color: #fff;
}
footer .developer a {
  color: #fff;
}
footer .developer a:hover {
  text-decoration: none;
}
footer .developer #designer-name, footer .developer #developer-name {
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  header, main, footer {
    display: none;
  }

  body {
    min-height: 100vh;
  }

  #mobile-msg {
    display: block;
  }
}
@media only screen and (max-width: 1599px) {
  .monitor-stand {
    width: 50vw !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #monitor-1 img, #monitor-2 img, #monitor-3 img {
    animation: scroll_img_lg 70s linear infinite !important;
  }
  #monitor-1 img:hover, #monitor-2 img:hover, #monitor-3 img:hover {
    animation-play-state: paused;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  #monitor-1 img, #monitor-2 img, #monitor-3 img {
    animation: scroll_img_md 70s linear infinite !important;
  }
  #monitor-1 img:hover, #monitor-2 img:hover, #monitor-3 img:hover {
    animation-play-state: paused;
  }
}