/* Compiled from style.styl */
/* TAGS */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  -webkit-transition: 1s all;
  transition: 1s all;
}
/* CLASSES */
.faded {
  opacity: 0;
  -webkit-transition: none !important;
  transition: none !important;
}
.fadedd {
  opacity: 0;
  -webkit-transition: 0.1s all !important;
  transition: 0.1s all !important;
}
.fadedt {
  opacity: 0;
}
.zoomed {
  -webkit-transform: scale(20);
          transform: scale(20);
  -webkit-transform-origin: 50% 20%;
          transform-origin: 50% 20%;
  -webkit-transition: 1s all;
  transition: 1s all;
}
.top,
.left,
.bottom,
.right,
.left2,
.right2 {
  position: fixed;
  z-index: 100;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.top,
.bottom {
  width: 80%;
  height: 10%;
  left: 10%;
}
.left,
.right {
  width: 10%;
  height: 80%;
  top: 10%;
}
.left2,
.right2 {
  width: 10%;
  height: 100%;
  top: 0;
}
.top {
  top: 0;
  border-bottom: 5px solid #000;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.top .x {
  width: 50%;
}
.top .r {
  text-align: right;
}
.left {
  left: 0;
  border-right: 5px solid #000;
}
.left2 {
  left: 0;
}
.right {
  right: 0;
  border-left: 5px solid #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 2em;
}
.right2 {
  right: 0;
}
.bottom {
  bottom: 0;
  border-top: 5px solid #000;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-style: italic;
}
.bottom p {
  -webkit-transition: 0.5s all;
  transition: 0.5s all;
}
.nav {
  cursor: pointer;
}
.bg {
  height: 80%;
  width: 80%;
  top: 10%;
  left: 10%;
  position: fixed;
  background-image: url("../media/brains/background.png");
  background-size: cover;
  background-position: center;
  -webkit-transition: 1s all;
  transition: 1s all;
}
.cont {
  height: 100%;
  width: 100%;
}
.full {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: 1s all;
  transition: 1s all;
}
.full .panel {
  height: 80%;
  width: 80%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.full .panel .chars {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
}
.full .sub {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.full .sub .glow {
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.full .sub .glow:hover {
  -webkit-animation-name: glow;
          animation-name: glow;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.full .think:hover {
  -webkit-animation-name: think;
          animation-name: think;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.full .inf {
  cursor: pointer;
  will-change: transform;
}
/* IDS */
/* KEYFRAMES */
@-webkit-keyframes glow {
  0% {
    -webkit-filter: drop-shadow(1px 1px 5px #ff0) drop-shadow(-1px -1px 5px #ff0) drop-shadow(1px -1px 5px #ff0) drop-shadow(-1px 1px 5px #ff0);
            filter: drop-shadow(1px 1px 5px #ff0) drop-shadow(-1px -1px 5px #ff0) drop-shadow(1px -1px 5px #ff0) drop-shadow(-1px 1px 5px #ff0);
  }
  50% {
    -webkit-filter: drop-shadow(5px 5px 5px #ff0) drop-shadow(-5px -5px 5px #ff0) drop-shadow(5px -5px 5px #ff0) drop-shadow(-5px 5px 5px #ff0);
            filter: drop-shadow(5px 5px 5px #ff0) drop-shadow(-5px -5px 5px #ff0) drop-shadow(5px -5px 5px #ff0) drop-shadow(-5px 5px 5px #ff0);
  }
  100% {
    -webkit-filter: drop-shadow(1px 1px 5px #ff0) drop-shadow(-1px -1px 5px #ff0) drop-shadow(1px -1px 5px #ff0) drop-shadow(-1px 1px 5px #ff0);
            filter: drop-shadow(1px 1px 5px #ff0) drop-shadow(-1px -1px 5px #ff0) drop-shadow(1px -1px 5px #ff0) drop-shadow(-1px 1px 5px #ff0);
  }
}
@keyframes glow {
  0% {
    -webkit-filter: drop-shadow(1px 1px 5px #ff0) drop-shadow(-1px -1px 5px #ff0) drop-shadow(1px -1px 5px #ff0) drop-shadow(-1px 1px 5px #ff0);
            filter: drop-shadow(1px 1px 5px #ff0) drop-shadow(-1px -1px 5px #ff0) drop-shadow(1px -1px 5px #ff0) drop-shadow(-1px 1px 5px #ff0);
  }
  50% {
    -webkit-filter: drop-shadow(5px 5px 5px #ff0) drop-shadow(-5px -5px 5px #ff0) drop-shadow(5px -5px 5px #ff0) drop-shadow(-5px 5px 5px #ff0);
            filter: drop-shadow(5px 5px 5px #ff0) drop-shadow(-5px -5px 5px #ff0) drop-shadow(5px -5px 5px #ff0) drop-shadow(-5px 5px 5px #ff0);
  }
  100% {
    -webkit-filter: drop-shadow(1px 1px 5px #ff0) drop-shadow(-1px -1px 5px #ff0) drop-shadow(1px -1px 5px #ff0) drop-shadow(-1px 1px 5px #ff0);
            filter: drop-shadow(1px 1px 5px #ff0) drop-shadow(-1px -1px 5px #ff0) drop-shadow(1px -1px 5px #ff0) drop-shadow(-1px 1px 5px #ff0);
  }
}
@-webkit-keyframes think {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes think {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}