* {
  margin: 0;
  padding: 0;
}

body {
  background: #222;
  font-family: 'Space Mono', monospace;
}

#container {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: auto;
}

.box {
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  height: 100px;
  width: 100px;
  position: fixed;
  -webkit-box-shadow: -5px -5px 35px -2px rgba(0, 0, 0, 0.3);
          box-shadow: -5px -5px 35px -2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 5;
  visibility: hidden;
}

.box > div {
  width: 100%;
  position: absolute;
}

.box_intro {
  -webkit-transition: -webkit-transform 0.5s linear;
  transition: -webkit-transform 0.5s linear;
  transition: transform 0.5s linear;
  transition: transform 0.5s linear, -webkit-transform 0.5s linear;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.top {
  padding: 10px;
  height: 25px;
  z-index: 3;
}

.top h3 {
  font-weight: 300;
  cursor: move;
}

.content {
  font-weight: 700;
  overflow: scroll;
  height: calc(100% - 55px);
  top: 45px;
}

.content > ul > li {
  padding-bottom: 20px;
}

.content > ul > li a {
  text-decoration: none;
  color: inherit;
}

.content > ul > li h4 {
  margin: 10px;
  cursor: pointer;
  text-transform: uppercase;
}

.content > ul > li p {
  margin-left: 10px;
  font-weight: 400;
  font-size: 13px;
  max-width: 90%;
}

.content > ul > li:hover h4 {
  padding-left: 10px;
}

.content > ul > li:hover p {
  padding-left: 1px;
}

.bottom {
  bottom: 0;
}

.bottom .read_more {
  display: none;
}

#a {
  bottom: 20%;
  margin-bottom: -24px;
  left: 41.66%;
  width: 25%;
  background: #eee;
}

#a li:hover h4 {
  color: #4068e6;
}

#b {
  top: calc(25% + 50px);
  bottom: 20%;
  width: 33.33%;
  left: 50%;
  max-height: 33.33%;
  min-height: 320px;
  background: #eee;
  z-index: 7;
}

#b li:hover h4 {
  color: #4068e6;
}

#b #moreWillCome h4 {
  text-transform: initial;
}

#b #moreWillCome:hover h4,
#b #moreWillCome:hover p {
  padding-left: 0px;
  color: inherit;
  cursor: auto;
}

#c {
  top: 25%;
  bottom: 128px;
  width: 33.33%;
  left: 58.33%;
  min-height: 228px;
  background: #bcbec0;
  z-index: 5;
}

#c li:hover h4 {
  color: #e0dd14;
}

#d {
  top: 80px;
  bottom: 64px;
  width: 25%;
  right: 8px;
  background: #4068e6;
  min-height: 80%;
  z-index: 6;
}

#d p,
#d h3,
#d h4 {
  color: #fff;
}

#d li:hover h4 {
  color: #e0dd14;
}

#e {
  right: calc(100% - 380px);
  bottom: 30px;
  height: 120px;
  width: 350px;
  background: #e0dd14;
  z-index: 8;
}

#e .content {
  top: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding-top: 30px;
}

#e .content a {
  color: inherit;
}

#e .content a:hover {
  padding-left: 0px;
}

#secret {
  position: fixed;
  z-index: 2;
  visibility: hidden;
  top: 80px;
  bottom: 64px;
  width: 25%;
  height: 100px;
  right: 8px;
  min-height: 80%;
  background-image: url("/img/Alex.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.shadow {
  pointer-events: none;
  height: 30px;
  z-index: 3;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(238, 238, 238, 0)), to(#eee));
  background: linear-gradient(to bottom, rgba(238, 238, 238, 0) 0%, #eee 100%);
}

.top .shadow {
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(rgba(238, 238, 238, 0)));
  background: linear-gradient(to bottom, #eee 0%, rgba(238, 238, 238, 0) 100%);
}

#c .shadow {
  background: -webkit-gradient(linear, left top, left bottom, from(#bcbec000), to(#bcbec0));
  background: linear-gradient(to bottom, #bcbec000 0%, #bcbec0 100%);
}

#c .top .shadow {
  background: -webkit-gradient(linear, left top, left bottom, from(#bcbec0), to(#bcbec000));
  background: linear-gradient(to bottom, #bcbec0 0%, #bcbec000 100%);
}

#d .shadow {
  background: -webkit-gradient(linear, left top, left bottom, from(#4067e600), to(#4068e6));
  background: linear-gradient(to bottom, #4067e600 0%, #4068e6 100%);
}

#d .top .shadow {
  background: -webkit-gradient(linear, left top, left bottom, from(#4068e6), to(#4067e600));
  background: linear-gradient(to bottom, #4068e6 0%, #4067e600 100%);
}

#e .shadow {
  background: -webkit-gradient(linear, left top, left bottom, from(#e0dc1400), to(#e0dd14));
  background: linear-gradient(to bottom, #e0dc1400 0%, #e0dd14 100%);
}

#e .top .shadow {
  background: -webkit-gradient(linear, left top, left bottom, from(#e0dd14), to(#e0dc1400));
  background: linear-gradient(to bottom, #e0dd14 0%, #e0dc1400 100%);
}

#reset {
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  display: none;
  background: #e0dd14;
  width: 200px;
  border: 20px #e0dd14 solid;
  text-align: center;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 3;
}

::-webkit-scrollbar {
  display: none;
}

#intro {
  position: absolute;
  color: white;
  margin: 0px 30px;
  top: 80px;
  width: 40%;
  height: auto;
}

#intro h2 {
  font-weight: 400;
}

#intro > ul {
  width: 60%;
  margin-top: 30px;
  list-style: none;
  padding-bottom: 170px;
}

#intro > ul > li {
  border-bottom: 1px white solid;
}

#intro > ul > li:first-child {
  border-top: 1px white solid;
}

#intro > ul > li .tab-title {
  padding: 16px 0px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

#intro > ul > li .tab-title span:last-child {
  float: right;
  -webkit-transition: -webkit-transform 0.25s ease-in-out;
  transition: -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
}

#intro > ul > li .tab-content {
  font-size: 12px;
  line-height: 1.7;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.25s ease-out;
  transition: max-height 0.25s ease-out;
  color: #bcbec0;
}

#intro > ul > li .tab-content.show {
  max-height: 1000px;
  -webkit-transition: max-height 0.25s ease-in;
  transition: max-height 0.25s ease-in;
}

#intro > ul > li .tab-content > p {
  padding-bottom: 20px;
}

#intro > ul > li .tab-content > p > span {
  padding-left: 10px;
}

#minigame {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 10000;
  background-color: rgba(20, 20, 20, 0.5);
  display: none;
  top: 0;
  left: 0;
}

#minigame .gamescreen {
  background-color: #bcbec0;
  width: 90%;
  margin: 0 auto;
  margin-top: 80px;
  max-width: 900px;
  display: none;
}

#minigame #poweroff {
  cursor: pointer;
  background-color: #e0dd14;
  position: fixed;
  padding: 20px;
  top: 0;
  left: 0;
}

/* - ALL SMALLER THAN WEB - */
@media only screen and (max-width: 1024px) {
  #container {
    position: unset;
    height: auto;
    width: auto;
  }
  #container #intro {
    position: unset;
    height: auto;
    width: auto;
    margin: 5%;
    padding-top: 50px;
  }
  #container #intro ul#tabs {
    width: auto;
    padding-bottom: 0;
    margin: 50px 0;
  }
  #container .box {
    position: unset !important;
    width: auto;
    height: auto;
    max-width: unset;
    max-height: unset;
    margin: 20px 10px;
    visibility: visible;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #container .box > .top > .shadow {
    display: none;
  }
  #container .box .top h3 {
    cursor: auto;
  }
  #container .box > div {
    position: unset;
  }
  #container .box .content {
    overflow: hidden;
    max-height: 300px;
  }
  #container .box .bottom {
    background: white;
    height: 60px;
    pointer-events: auto;
    cursor: pointer;
  }
  #container .box .bottom .read_more {
    color: black;
    text-align: center;
    padding: 15px;
    display: block;
  }
  #container #e.box .content {
    padding-top: 0px;
  }
  #container #e.box .content a {
    margin: 30px 0;
  }
  #container #e.box .bottom {
    display: none;
  }
  #container #secret {
    display: none;
  }
}

/* - TABLET LANDSCAPE - */
/* - TABLET PORTRAIT - */
/* - MOBILE LANDSCAPE - */
/* - MOBILE PORTRAIT - */
/*# sourceMappingURL=test.css.map */