#secondaryCanvas {
  display: none;
}

#contents {
  width: 30rem;
  height: 30rem;
  position: relative;
  margin: auto;
}

.circuit-container {
  width: 30rem;
  height: 30rem;
  /* top: 5rem !important;
  left: 4rem !important; */
  position: absolute;
  transform-style: preserve-3d;
  transform: scale(1.5) rotateX(60deg) rotateY(0deg) rotateZ(45deg);
}



#fcbdf081-34ad-4375-9acb-029a31d74248 {
  width: 100%;
  height: 100%;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.gradient {
  fill: none;
  stroke: url(#circuit-gradient);
  filter: url(#glow);
}

#fcbdf081-34ad-4375-9acb-029a31d74248 {
  fill: transparent;
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 120px;
  stroke-dasharray: 650 650;
  stroke-dashoffset: 650;
  stroke: #000;
  stroke-width: 3px;
  -ms-transition: stroke-dashoffset 5s linear;
  -webkit-transition: stroke-dashoffset 5s linear;
  -moz-transition: stroke-dashoffset 5s linear;
  transition: stroke-dashoffset 5s linear;
}

#fcbdf081-34ad-4375-9acb-029a31d74248.trace {
  stroke-dashoffset: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.isometric {
  position: absolute;
  top: 0%;
  left: 11rem;
  overflow: visible;
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg);
}

.isometric-small {

  transform: scale(0.4) rotateX(60deg) rotateY(0deg) rotateZ(45deg);
}

.isometric * {
  transform-style: preserve-3d;
}

.isometric-container {
  position: absolute;
  overflow: visible !important;

}

html {
  font-size: 16px;
}

#chipContainer {
  animation-delay: 0s;
  position: absolute;
  transform-origin: center;
  top: 5.7rem;
  left: 4.2rem
}

#chip {
  animation-delay: 0s;
  position: relative;
  transform-origin: center;

}

#chip.placed {
  opacity: 1;

  animation: planeAnimation 2s ease-in-out forwards alternate infinite;
  animation-delay: 0s;
  position: relative;
}






.placed .chipBottom:after {
  content: "";
  position: absolute;
  width: 26.0333333333rem;
  height: 26.0333333333rem;
  border-radius: inherit;
  background: rgb(0 255 200 / 20%);
  border-color: rgba(0, 0, 0, 0.2);
  transform: translateX(5rem) translateY(5rem) translateZ(-1rem);
  box-shadow: 0 0rem black;
  filter: blur(3rem);
  animation: shineBright 4s alternate infinite;
  animation-delay: 6s;
}

.chipTop {
  position: absolute;
  width: 28.1666666667rem;
  height: 28.1666666667rem;
  background-image: linear-gradient(91deg,
      #3780c9ff 1%,
      #4cabdfff 52%,
      #8eb9eeff 67%);
  box-shadow: 5px 5px 4px 0px #3780c98f, inset 4px 4px #9cd7ff5c;
  top: 11.0333333333rem;
  left: 11.0333333333rem;
  border-radius: 3rem;
  transform: translateZ(-0.1rem);
}

.chipSides {
  position: absolute;
  width: 26.3666666667rem;
  height: 26.3666666667rem;
  transform-origin: center;
  opacity: 1;
  top: 11.4333333333rem;
  left: 11.4333333333rem;
  position: absolute;
  transform: translateZ(-3rem);
}

.chipSides>* {
  position: absolute;

  box-sizing: border-box;
}

.chipSides>*:nth-child(3n + 1) {
  width: 26.1666666667rem;
  height: 26.1666666667rem;
}

.chipSides>*:nth-child(3n + 2) {
  width: 26.1666666667rem;
  height: 2.5rem;
}

.chipSides>*:nth-child(3n + 3) {
  width: 26.1666666667rem;
  height: 2.5rem;
}

.chipSides>*:nth-child(1) {
  transform: translateZ(2.5rem);
}

.chipSides>*:nth-child(2) {
  transform: translateY(24.9166666667rem) translateZ(1.25rem) rotateX(-90deg);
  background-image: linear-gradient(90deg,
      #3170cc 5%,
      #8db4e30d 15%,
      #ffffff00 96%);
}

.chipSides>*:nth-child(3) {
  transform: translateX(13.0833333333rem) translateY(11.8333333333rem) translateZ(1.25rem) rotateX(-90deg) rotateY(90deg);
  background-image: linear-gradient(-90deg,
      #3f7edaff 5%,
      #8db4e30d 15%,
      #ffffff00 96%);
}

.chipSides>*:nth-child(4) {
  transform: initial;
}

.chipSides>*:nth-child(5) {
  transform: translateY(-1.25rem) translateZ(1.25rem) rotateX(-90deg);
}

.chipSides>*:nth-child(6) {
  transform: translateX(-13.0833333333rem) translateY(11.8333333333rem) translateZ(1.25rem) rotateX(-90deg) rotateY(90deg);
}

.chipBottom {
  position: absolute;
  width: 28.0666666667rem;
  height: 28.0666666667rem;
  top: 11.1333333333rem;
  left: 11.1333333333rem;
  border-radius: 3rem;
  position: absolute;
  transform: translateZ(-2.6rem);
  background-image: linear-gradient(45deg,
      #3170cc 1%,
      #8db4e3 38%,
      #ffffffff 50%,
      #8db4e3 63%,
      #3170cc 100%);
}

.pixelArea {
  position: absolute;
  width: 23.6666666667rem;
  height: 23.6666666667rem;
  background: #00083acc;
  top: 11.9333333333rem;
  left: 11.9333333333rem;
  border-radius: 3rem;
  box-shadow: inset 6px 5px 2px #2e83b787;
  transform: translateZ(0rem) translateX(1rem) translateY(1rem);
}

.shiny-glow {
  top: 15.3333333333rem;
  left: 15.3333333333rem;
  position: absolute;
  width: 18.6666666667rem;
  height: 18.6666666667rem;
  transform-origin: center;
  transform: translateZ(0);

  animation-delay: 0s;
}

.shiny-glow>* {
  position: absolute;
  opacity: 0;
  box-sizing: border-box;
  background: transparent;
}

.placed .shiny-glow>* {

  animation: shine 2s .5s alternate infinite;

}

/* .projected-container {

  width: 9rem;

  height: 9rem;
  margin: auto;
  transform: scale(0);
  position: relative;
} */

.projected {
  width: 9rem;

  height: 9rem;
  margin: auto;
  animation:
    scaleIn .5s ease-in-out .5s 1 forwards;
  /* for the fade-in animation*/
  opacity: 0;
  transform: scale(0);
  animation-name: scaleIn;

  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-delay: 1s;
  animation-direction: normal;
}

.projected::after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .5;

  animation-name: projected;

  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-direction: alternate;


  background-image: url('//img/brain.png');
}

@keyframes scaleIn {
  0% {

    opacity: 0;
    transform: scale(0);
  }

  100% {

    opacity: 1;
    transform: scale(1);
  }
}


@keyframes projected {
  0% {
    height: 9rem;
    opacity: .5;
    transform: translateY(0rem);
  }

  50% {
    height: 9rem;

    opacity: .6;
    filter: hue-rotate(-40deg);

  }

  100% {
    height: 9rem;
    opacity: .7;
    transform: translateY(.4rem);
  }
}

.shiny-glow>*:nth-child(3n + 1) {
  width: 18.6666666667rem;
  height: 18.6666666667rem;
}

.shiny-glow>*:nth-child(3n + 2) {
  width: 18.6666666667rem;
  height: 23.6666666667rem;
}

.shiny-glow>*:nth-child(3n + 3) {
  width: 18.6666666667rem;
  height: 23.6666666667rem;
}

.shiny-glow>*:nth-child(1) {
  transform: translateZ(23.6666666667rem);
}

.shiny-glow>*:nth-child(2) {
  transform: translateY(6.8333333333rem) translateZ(11.8333333333rem) rotateX(-90deg);
}

.shiny-glow>*:nth-child(3) {
  transform: translateX(9.3333333333rem) translateY(-2.5rem) translateZ(11.8333333333rem) rotateX(-90deg) rotateY(90deg);
}

.shiny-glow>* {
  background-image: linear-gradient(0deg, #00e8ff80 0%, #00f7ff00);
}

.tine {
  position: absolute;
  background: url("//img/tine1.svg");
  background-size: cover;
  height: 5rem;
  width: 2.5rem;
}

.tine2 {
  position: absolute;
  background: url("//img/tine2.svg");
  background-size: cover;
  height: 2rem;
  width: 5rem;
}

@keyframes planeAnimation {
  from {
    transform: translateZ(0rem);
  }

  to {
    transform: translateZ(.5rem);
  }
}

@keyframes shine {
  0% {
    opacity: 0.2;
  }

  100% {
    opacity: .4;
  }
}

@keyframes shineBright {
  0% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

.pixel {
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: darkcyan;
  font-size: 8px;
  transition: opacity 2s;
  top: 2.5rem;
  left: 2.5rem;
}

.pixel:hover {
  opacity: 1;
}

.pixel:nth-child(0) {
  top: 2.5rem;
  left: 2.5rem;
}

.pixel:nth-child(1) {
  top: 3.8333333333rem;
  left: 2.5rem;
}

.pixel:nth-child(2) {
  top: 5.1666666667rem;
  left: 2.5rem;
}

.pixel:nth-child(3) {
  top: 6.5rem;
  left: 2.5rem;
}

.pixel:nth-child(4) {
  top: 7.8333333333rem;
  left: 2.5rem;
}

.pixel:nth-child(5) {
  top: 9.1666666667rem;
  left: 2.5rem;
}

.pixel:nth-child(6) {
  top: 10.5rem;
  left: 2.5rem;
}

.pixel:nth-child(7) {
  top: 11.8333333333rem;
  left: 2.5rem;
}

.pixel:nth-child(8) {
  top: 13.1666666667rem;
  left: 2.5rem;
}

.pixel:nth-child(9) {
  top: 14.5rem;
  left: 2.5rem;
}

.pixel:nth-child(10) {
  top: 15.8333333333rem;
  left: 2.5rem;
}

.pixel:nth-child(11) {
  top: 17.1666666667rem;
  left: 2.5rem;
}

.pixel:nth-child(12) {
  top: 18.5rem;
  left: 2.5rem;
}

.pixel:nth-child(13) {
  top: 19.8333333333rem;
  left: 2.5rem;
}

.pixel:nth-child(14) {
  top: 2.5rem;
  left: 3.8333333333rem;
}

.pixel:nth-child(15) {
  top: 3.8333333333rem;
  left: 3.8333333333rem;
}

.pixel:nth-child(16) {
  top: 5.1666666667rem;
  left: 3.8333333333rem;
}

.pixel:nth-child(17) {
  top: 6.5rem;
  left: 3.8333333333rem;
}

.pixel:nth-child(18) {
  top: 7.8333333333rem;
  left: 3.8333333333rem;
}

.pixel:nth-child(19) {
  top: 9.1666666667rem;
  left: 3.8333333333rem;
}

.pixel:nth-child(20) {
  top: 10.5rem;
  left: 3.8333333333rem;
}

.pixel:nth-child(21) {
  top: 11.8333333333rem;
  left: 3.8333333333rem;
}

.pixel:nth-child(22) {
  top: 13.1666666667rem;
  left: 3.8333333333rem;
}

.pixel:nth-child(23) {
  top: 14.5rem;
  left: 3.8333333333rem;
}

.pixel:nth-child(24) {
  top: 15.8333333333rem;
  left: 3.8333333333rem;
}

.pixel:nth-child(25) {
  top: 17.1666666667rem;
  left: 3.8333333333rem;
}

.pixel:nth-child(26) {
  top: 18.5rem;
  left: 3.8333333333rem;
}

.pixel:nth-child(27) {
  top: 19.8333333333rem;
  left: 3.8333333333rem;
}

.pixel:nth-child(28) {
  top: 2.5rem;
  left: 5.1666666667rem;
}

.pixel:nth-child(29) {
  top: 3.8333333333rem;
  left: 5.1666666667rem;
}

.pixel:nth-child(30) {
  top: 5.1666666667rem;
  left: 5.1666666667rem;
}

.pixel:nth-child(31) {
  top: 6.5rem;
  left: 5.1666666667rem;
}

.pixel:nth-child(32) {
  top: 7.8333333333rem;
  left: 5.1666666667rem;
}

.pixel:nth-child(33) {
  top: 9.1666666667rem;
  left: 5.1666666667rem;
}

.pixel:nth-child(34) {
  top: 10.5rem;
  left: 5.1666666667rem;
}

.pixel:nth-child(35) {
  top: 11.8333333333rem;
  left: 5.1666666667rem;
}

.pixel:nth-child(36) {
  top: 13.1666666667rem;
  left: 5.1666666667rem;
}

.pixel:nth-child(37) {
  top: 14.5rem;
  left: 5.1666666667rem;
}

.pixel:nth-child(38) {
  top: 15.8333333333rem;
  left: 5.1666666667rem;
}

.pixel:nth-child(39) {
  top: 17.1666666667rem;
  left: 5.1666666667rem;
}

.pixel:nth-child(40) {
  top: 18.5rem;
  left: 5.1666666667rem;
}

.pixel:nth-child(41) {
  top: 19.8333333333rem;
  left: 5.1666666667rem;
}

.pixel:nth-child(42) {
  top: 2.5rem;
  left: 6.5rem;
}

.pixel:nth-child(43) {
  top: 3.8333333333rem;
  left: 6.5rem;
}

.pixel:nth-child(44) {
  top: 5.1666666667rem;
  left: 6.5rem;
}

.pixel:nth-child(45) {
  top: 6.5rem;
  left: 6.5rem;
}

.pixel:nth-child(46) {
  top: 7.8333333333rem;
  left: 6.5rem;
}

.pixel:nth-child(47) {
  top: 9.1666666667rem;
  left: 6.5rem;
}

.pixel:nth-child(48) {
  top: 10.5rem;
  left: 6.5rem;
}

.pixel:nth-child(49) {
  top: 11.8333333333rem;
  left: 6.5rem;
}

.pixel:nth-child(50) {
  top: 13.1666666667rem;
  left: 6.5rem;
}

.pixel:nth-child(51) {
  top: 14.5rem;
  left: 6.5rem;
}

.pixel:nth-child(52) {
  top: 15.8333333333rem;
  left: 6.5rem;
}

.pixel:nth-child(53) {
  top: 17.1666666667rem;
  left: 6.5rem;
}

.pixel:nth-child(54) {
  top: 18.5rem;
  left: 6.5rem;
}

.pixel:nth-child(55) {
  top: 19.8333333333rem;
  left: 6.5rem;
}

.pixel:nth-child(56) {
  top: 2.5rem;
  left: 7.8333333333rem;
}

.pixel:nth-child(57) {
  top: 3.8333333333rem;
  left: 7.8333333333rem;
}

.pixel:nth-child(58) {
  top: 5.1666666667rem;
  left: 7.8333333333rem;
}

.pixel:nth-child(59) {
  top: 6.5rem;
  left: 7.8333333333rem;
}

.pixel:nth-child(60) {
  top: 7.8333333333rem;
  left: 7.8333333333rem;
}

.pixel:nth-child(61) {
  top: 9.1666666667rem;
  left: 7.8333333333rem;
}

.pixel:nth-child(62) {
  top: 10.5rem;
  left: 7.8333333333rem;
}

.pixel:nth-child(63) {
  top: 11.8333333333rem;
  left: 7.8333333333rem;
}

.pixel:nth-child(64) {
  top: 13.1666666667rem;
  left: 7.8333333333rem;
}

.pixel:nth-child(65) {
  top: 14.5rem;
  left: 7.8333333333rem;
}

.pixel:nth-child(66) {
  top: 15.8333333333rem;
  left: 7.8333333333rem;
}

.pixel:nth-child(67) {
  top: 17.1666666667rem;
  left: 7.8333333333rem;
}

.pixel:nth-child(68) {
  top: 18.5rem;
  left: 7.8333333333rem;
}

.pixel:nth-child(69) {
  top: 19.8333333333rem;
  left: 7.8333333333rem;
}

.pixel:nth-child(70) {
  top: 2.5rem;
  left: 9.1666666667rem;
}

.pixel:nth-child(71) {
  top: 3.8333333333rem;
  left: 9.1666666667rem;
}

.pixel:nth-child(72) {
  top: 5.1666666667rem;
  left: 9.1666666667rem;
}

.pixel:nth-child(73) {
  top: 6.5rem;
  left: 9.1666666667rem;
}

.pixel:nth-child(74) {
  top: 7.8333333333rem;
  left: 9.1666666667rem;
}

.pixel:nth-child(75) {
  top: 9.1666666667rem;
  left: 9.1666666667rem;
}

.pixel:nth-child(76) {
  top: 10.5rem;
  left: 9.1666666667rem;
}

.pixel:nth-child(77) {
  top: 11.8333333333rem;
  left: 9.1666666667rem;
}

.pixel:nth-child(78) {
  top: 13.1666666667rem;
  left: 9.1666666667rem;
}

.pixel:nth-child(79) {
  top: 14.5rem;
  left: 9.1666666667rem;
}

.pixel:nth-child(80) {
  top: 15.8333333333rem;
  left: 9.1666666667rem;
}

.pixel:nth-child(81) {
  top: 17.1666666667rem;
  left: 9.1666666667rem;
}

.pixel:nth-child(82) {
  top: 18.5rem;
  left: 9.1666666667rem;
}

.pixel:nth-child(83) {
  top: 19.8333333333rem;
  left: 9.1666666667rem;
}

.pixel:nth-child(84) {
  top: 2.5rem;
  left: 10.5rem;
}

.pixel:nth-child(85) {
  top: 3.8333333333rem;
  left: 10.5rem;
}

.pixel:nth-child(86) {
  top: 5.1666666667rem;
  left: 10.5rem;
}

.pixel:nth-child(87) {
  top: 6.5rem;
  left: 10.5rem;
}

.pixel:nth-child(88) {
  top: 7.8333333333rem;
  left: 10.5rem;
}

.pixel:nth-child(89) {
  top: 9.1666666667rem;
  left: 10.5rem;
}

.pixel:nth-child(90) {
  top: 10.5rem;
  left: 10.5rem;
}

.pixel:nth-child(91) {
  top: 11.8333333333rem;
  left: 10.5rem;
}

.pixel:nth-child(92) {
  top: 13.1666666667rem;
  left: 10.5rem;
}

.pixel:nth-child(93) {
  top: 14.5rem;
  left: 10.5rem;
}

.pixel:nth-child(94) {
  top: 15.8333333333rem;
  left: 10.5rem;
}

.pixel:nth-child(95) {
  top: 17.1666666667rem;
  left: 10.5rem;
}

.pixel:nth-child(96) {
  top: 18.5rem;
  left: 10.5rem;
}

.pixel:nth-child(97) {
  top: 19.8333333333rem;
  left: 10.5rem;
}

.pixel:nth-child(98) {
  top: 2.5rem;
  left: 11.8333333333rem;
}

.pixel:nth-child(99) {
  top: 3.8333333333rem;
  left: 11.8333333333rem;
}

.pixel:nth-child(100) {
  top: 5.1666666667rem;
  left: 11.8333333333rem;
}

.pixel:nth-child(101) {
  top: 6.5rem;
  left: 11.8333333333rem;
}

.pixel:nth-child(102) {
  top: 7.8333333333rem;
  left: 11.8333333333rem;
}

.pixel:nth-child(103) {
  top: 9.1666666667rem;
  left: 11.8333333333rem;
}

.pixel:nth-child(104) {
  top: 10.5rem;
  left: 11.8333333333rem;
}

.pixel:nth-child(105) {
  top: 11.8333333333rem;
  left: 11.8333333333rem;
}

.pixel:nth-child(106) {
  top: 13.1666666667rem;
  left: 11.8333333333rem;
}

.pixel:nth-child(107) {
  top: 14.5rem;
  left: 11.8333333333rem;
}

.pixel:nth-child(108) {
  top: 15.8333333333rem;
  left: 11.8333333333rem;
}

.pixel:nth-child(109) {
  top: 17.1666666667rem;
  left: 11.8333333333rem;
}

.pixel:nth-child(110) {
  top: 18.5rem;
  left: 11.8333333333rem;
}

.pixel:nth-child(111) {
  top: 19.8333333333rem;
  left: 11.8333333333rem;
}

.pixel:nth-child(112) {
  top: 2.5rem;
  left: 13.1666666667rem;
}

.pixel:nth-child(113) {
  top: 3.8333333333rem;
  left: 13.1666666667rem;
}

.pixel:nth-child(114) {
  top: 5.1666666667rem;
  left: 13.1666666667rem;
}

.pixel:nth-child(115) {
  top: 6.5rem;
  left: 13.1666666667rem;
}

.pixel:nth-child(116) {
  top: 7.8333333333rem;
  left: 13.1666666667rem;
}

.pixel:nth-child(117) {
  top: 9.1666666667rem;
  left: 13.1666666667rem;
}

.pixel:nth-child(118) {
  top: 10.5rem;
  left: 13.1666666667rem;
}

.pixel:nth-child(119) {
  top: 11.8333333333rem;
  left: 13.1666666667rem;
}

.pixel:nth-child(120) {
  top: 13.1666666667rem;
  left: 13.1666666667rem;
}

.pixel:nth-child(121) {
  top: 14.5rem;
  left: 13.1666666667rem;
}

.pixel:nth-child(122) {
  top: 15.8333333333rem;
  left: 13.1666666667rem;
}

.pixel:nth-child(123) {
  top: 17.1666666667rem;
  left: 13.1666666667rem;
}

.pixel:nth-child(124) {
  top: 18.5rem;
  left: 13.1666666667rem;
}

.pixel:nth-child(125) {
  top: 19.8333333333rem;
  left: 13.1666666667rem;
}

.pixel:nth-child(126) {
  top: 2.5rem;
  left: 14.5rem;
}

.pixel:nth-child(127) {
  top: 3.8333333333rem;
  left: 14.5rem;
}

.pixel:nth-child(128) {
  top: 5.1666666667rem;
  left: 14.5rem;
}

.pixel:nth-child(129) {
  top: 6.5rem;
  left: 14.5rem;
}

.pixel:nth-child(130) {
  top: 7.8333333333rem;
  left: 14.5rem;
}

.pixel:nth-child(131) {
  top: 9.1666666667rem;
  left: 14.5rem;
}

.pixel:nth-child(132) {
  top: 10.5rem;
  left: 14.5rem;
}

.pixel:nth-child(133) {
  top: 11.8333333333rem;
  left: 14.5rem;
}

.pixel:nth-child(134) {
  top: 13.1666666667rem;
  left: 14.5rem;
}

.pixel:nth-child(135) {
  top: 14.5rem;
  left: 14.5rem;
}

.pixel:nth-child(136) {
  top: 15.8333333333rem;
  left: 14.5rem;
}

.pixel:nth-child(137) {
  top: 17.1666666667rem;
  left: 14.5rem;
}

.pixel:nth-child(138) {
  top: 18.5rem;
  left: 14.5rem;
}

.pixel:nth-child(139) {
  top: 19.8333333333rem;
  left: 14.5rem;
}

.pixel:nth-child(140) {
  top: 2.5rem;
  left: 15.8333333333rem;
}

.pixel:nth-child(141) {
  top: 3.8333333333rem;
  left: 15.8333333333rem;
}

.pixel:nth-child(142) {
  top: 5.1666666667rem;
  left: 15.8333333333rem;
}

.pixel:nth-child(143) {
  top: 6.5rem;
  left: 15.8333333333rem;
}

.pixel:nth-child(144) {
  top: 7.8333333333rem;
  left: 15.8333333333rem;
}

.pixel:nth-child(145) {
  top: 9.1666666667rem;
  left: 15.8333333333rem;
}

.pixel:nth-child(146) {
  top: 10.5rem;
  left: 15.8333333333rem;
}

.pixel:nth-child(147) {
  top: 11.8333333333rem;
  left: 15.8333333333rem;
}

.pixel:nth-child(148) {
  top: 13.1666666667rem;
  left: 15.8333333333rem;
}

.pixel:nth-child(149) {
  top: 14.5rem;
  left: 15.8333333333rem;
}

.pixel:nth-child(150) {
  top: 15.8333333333rem;
  left: 15.8333333333rem;
}

.pixel:nth-child(151) {
  top: 17.1666666667rem;
  left: 15.8333333333rem;
}

.pixel:nth-child(152) {
  top: 18.5rem;
  left: 15.8333333333rem;
}

.pixel:nth-child(153) {
  top: 19.8333333333rem;
  left: 15.8333333333rem;
}

.pixel:nth-child(154) {
  top: 2.5rem;
  left: 17.1666666667rem;
}

.pixel:nth-child(155) {
  top: 3.8333333333rem;
  left: 17.1666666667rem;
}

.pixel:nth-child(156) {
  top: 5.1666666667rem;
  left: 17.1666666667rem;
}

.pixel:nth-child(157) {
  top: 6.5rem;
  left: 17.1666666667rem;
}

.pixel:nth-child(158) {
  top: 7.8333333333rem;
  left: 17.1666666667rem;
}

.pixel:nth-child(159) {
  top: 9.1666666667rem;
  left: 17.1666666667rem;
}

.pixel:nth-child(160) {
  top: 10.5rem;
  left: 17.1666666667rem;
}

.pixel:nth-child(161) {
  top: 11.8333333333rem;
  left: 17.1666666667rem;
}

.pixel:nth-child(162) {
  top: 13.1666666667rem;
  left: 17.1666666667rem;
}

.pixel:nth-child(163) {
  top: 14.5rem;
  left: 17.1666666667rem;
}

.pixel:nth-child(164) {
  top: 15.8333333333rem;
  left: 17.1666666667rem;
}

.pixel:nth-child(165) {
  top: 17.1666666667rem;
  left: 17.1666666667rem;
}

.pixel:nth-child(166) {
  top: 18.5rem;
  left: 17.1666666667rem;
}

.pixel:nth-child(167) {
  top: 19.8333333333rem;
  left: 17.1666666667rem;
}

.pixel:nth-child(168) {
  top: 2.5rem;
  left: 18.5rem;
}

.pixel:nth-child(169) {
  top: 3.8333333333rem;
  left: 18.5rem;
}

.pixel:nth-child(170) {
  top: 5.1666666667rem;
  left: 18.5rem;
}

.pixel:nth-child(171) {
  top: 6.5rem;
  left: 18.5rem;
}

.pixel:nth-child(172) {
  top: 7.8333333333rem;
  left: 18.5rem;
}

.pixel:nth-child(173) {
  top: 9.1666666667rem;
  left: 18.5rem;
}

.pixel:nth-child(174) {
  top: 10.5rem;
  left: 18.5rem;
}

.pixel:nth-child(175) {
  top: 11.8333333333rem;
  left: 18.5rem;
}

.pixel:nth-child(176) {
  top: 13.1666666667rem;
  left: 18.5rem;
}

.pixel:nth-child(177) {
  top: 14.5rem;
  left: 18.5rem;
}

.pixel:nth-child(178) {
  top: 15.8333333333rem;
  left: 18.5rem;
}

.pixel:nth-child(179) {
  top: 17.1666666667rem;
  left: 18.5rem;
}

.pixel:nth-child(180) {
  top: 18.5rem;
  left: 18.5rem;
}

.pixel:nth-child(181) {
  top: 19.8333333333rem;
  left: 18.5rem;
}

.pixel:nth-child(182) {
  top: 2.5rem;
  left: 19.8333333333rem;
}

.pixel:nth-child(183) {
  top: 3.8333333333rem;
  left: 19.8333333333rem;
}

.pixel:nth-child(184) {
  top: 5.1666666667rem;
  left: 19.8333333333rem;
}

.pixel:nth-child(185) {
  top: 6.5rem;
  left: 19.8333333333rem;
}

.pixel:nth-child(186) {
  top: 7.8333333333rem;
  left: 19.8333333333rem;
}

.pixel:nth-child(187) {
  top: 9.1666666667rem;
  left: 19.8333333333rem;
}

.pixel:nth-child(188) {
  top: 10.5rem;
  left: 19.8333333333rem;
}

.pixel:nth-child(189) {
  top: 11.8333333333rem;
  left: 19.8333333333rem;
}

.pixel:nth-child(190) {
  top: 13.1666666667rem;
  left: 19.8333333333rem;
}

.pixel:nth-child(191) {
  top: 14.5rem;
  left: 19.8333333333rem;
}

.pixel:nth-child(192) {
  top: 15.8333333333rem;
  left: 19.8333333333rem;
}

.pixel:nth-child(193) {
  top: 17.1666666667rem;
  left: 19.8333333333rem;
}

.pixel:nth-child(194) {
  top: 18.5rem;
  left: 19.8333333333rem;
}

.pixel:nth-child(195) {
  top: 19.8333333333rem;
  left: 19.8333333333rem;
}



























/* The Loader */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
  /*to deal with the header circuit image*/
  transform: translate3d(0, 0, 50em);
}

.no-js #loader-wrapper {
  display: none;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 4px dotted transparent;
  border-top-color: #16a085;
  box-shadow: 1px 1px 4px #53ffac;
  -webkit-animation: spin 1.7s linear infinite;
  animation: spin 1.7s linear infinite;
  z-index: 11;
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 4px dotted transparent;
  border-top-color: #0075db;
  box-shadow: 1px 1px 4px #5392ff;
  -webkit-animation: spin-reverse 0.6s linear infinite;
  animation: spin-reverse 0.6s linear infinite;
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 4px dotted transparent;
  border-top-color: #004bcd;
  box-shadow: 1px 1px 4px #5392ff;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(-360deg);
  }
}

@keyframes spin-reverse {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #0a001e;
  z-index: 10;


}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

/* Loaded styles */
.loaded #loader-wrapper .loader-section.section-left {
  transform: translateX(-100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  transform: translateX(100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
  opacity: 0;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  transform: translateY(-100%);
  transition: all 0.3s 1s ease-out;
}


.loaded header {

  overflow-x: hidden;
}

.header-animation {
  margin: auto;
  height: 24.1em;
}

@media (max-width: 991px) {
  header {
    margin-top: 120px;
  }

  #chipContainer {
    left: -.5rem !important;
    top: 5.7rem !important;

  }

  .circuit-container {
    width: 20rem !important;
  }

  #contents {
    width: 21rem !important;
  }
}