html, body {
  background-color: #f9f9f9;
  color: #636b6f;
  font-family: 'Raleway', sans-serif;
  font-weight: 100;
  height: 100vh;
  margin: 0;
}

.main {
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}

.content {
  max-width: 992px;
  margin: auto;
  text-align: center;
}

.title h1 {
  font-size: 70px;
  color: #090A0F;
  margin: 25px 0;
}

.logo {
  height: 100px;
}

.subtitle h2 {
  font-size: 40px;
  margin: 25px 0;
}

.links h3 {
  font-size: 25px;
  margin: 25px 0;
}

.links a {
  display: inline-block;
  color: #636b6f;
  padding: 10px 25px;
  margin: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1rem;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: color .2s ease-in-out, box-shadow .2s ease-in-out;
  -ms-transition: color .2s ease-in-out, box-shadow .2s ease-in-out;
  transition: color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.links a:hover {
  -webkit-box-shadow: 1px 1px 17px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 1px 1px 17px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 1px 1px 17px 2px rgba(0, 0, 0, 0.5);
  border-radius: 5%;
}

.links a.red:hover {
  color: #D54F33;
}

.links a.orange:hover {
  color: orange;
}

.links a.yellow:hover {
  color: #F5CD47;
}

.links a.green:hover {
  color: #3D834C;
}

.links a.blue:hover {
  color: #4D83BB;
}

.links a.purple:hover {
  color: purple;
}

/* Subnav */
:root {
  --global-color1: #636b6f;
  --global-color2: #636b6f;
  --global-white: #fff;
  --global-black: #090A0F;
}

#mobile-subnav .overlay {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 0%;
  height: 0%;
  background-color: rgba(16, 39, 40, 0.75);
  border-top-left-radius: 100%;
  transition: width .5s ease, height .5s ease, border-radius .5s ease;
}

#mobile-subnav .overlay.opened {
  width: 100%;
  height: 100%;
  border-top-left-radius: 0;
}

.mob-submenu2-item, .mob-submenu2-open-button {
  background: var(--global-color2);
  border-radius: 100%;
  width: 55px;
  height: 55px;
  margin-left: 0;
  position: absolute;
  top: 0;
  color: var(--global-white);
  text-align: center;
  line-height: 80px;
  transform: translate3d(0, 0, 0);
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.mob-submenu2-item i, .mob-submenu2-open-button i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mob-submenu2-open {
  display: none;
}

.hamburger {
  width: 25px;
  height: 3px;
  background-color: var(--global-white);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  transition: transform 200ms;
}

.hamburger-1 {
  transform: translate3d(0, -8px, 0);
}

.hamburger-2 {
  transform: translate3d(0, 0, 0);
}

.hamburger-3 {
  transform: translate3d(0, 8px, 0);
}

.mob-submenu2-open:checked+.mob-submenu2-open-button .hamburger-1 {
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.mob-submenu2-open:checked+.mob-submenu2-open-button .hamburger-2 {
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.mob-submenu2-open:checked+.mob-submenu2-open-button .hamburger-3 {
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.mob-submenu2 {
  position: absolute;
  right: 50px;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  font-size: 20px;
  bottom: 50px;
}

.mob-submenu2 {
  filter: url("#goo");
  /* filter: url("#shadowed-goo"); */
}

.mob-submenu2-item {
  background-color: var(--global-color2);
  color: var(--global-white);
}

.mob-submenu2-item:nth-child(3) {
  transition-duration: .2s;
}

.mob-submenu2-item:nth-child(4) {
  transition-duration: .2s;
}

.mob-submenu2-item:nth-child(5) {
  transition-duration: .2s;
}

.mob-submenu2-item:nth-child(6) {
  transition-duration: .2s;
}

.mob-submenu2-open-button {
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  transform: translate3d(0, 0, 0);
  cursor: pointer;
}

.mob-submenu2-open-button:hover {
  background-color: var(--global-color1);
  color: var(--global-white);
  transform: translate3d(0, 0, 0);
}

.mob-submenu2-open:checked+.mob-submenu2-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  transform: translate3d(0, 0, 0);
  background-color: var(--global-white);
  color: var(--global-color1);
}

.mob-submenu2-open:checked+.mob-submenu2-open-button .hamburger {
  background-color: var(--global-black);
}

.mob-submenu2-open:checked~.mob-submenu2-item {
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mob-submenu2-open:checked~.mob-submenu2-item:hover,
.mob-submenu2-open:checked~.mob-submenu2-item:active {
  background-color: var(--global-color1);
  color: var(--global-white);
}

/* Mob menu animation straight up */
.mob-submenu2-open.straight:checked~.mob-submenu2-item:nth-child(3) {
  transition-duration: 170ms;
  transform: translate3d(0, -60px, 0);
}

.mob-submenu2-open.straight:checked~.mob-submenu2-item:nth-child(4) {
  transition-duration: 250ms;
  transform: translate3d(0, -120px, 0);
}

.mob-submenu2-open.straight:checked~.mob-submenu2-item:nth-child(5) {
  transition-duration: 330ms;
  transform: translate3d(0, -180px, 0);
}

.mob-submenu2-open.straight:checked~.mob-submenu2-item:nth-child(6) {
  transition-duration: 410ms;
  transform: translate3d(0, -240px, 0);
}

.mob-submenu2-open.straight:checked~.mob-submenu2-item:nth-child(7) {
  transition-duration: 490ms;
  transform: translate3d(0, -300px, 0);
}

.mob-submenu2-open.straight:checked~.mob-submenu2-item:nth-child(8) {
  transition-duration: 570ms;
  transform: translate3d(0, -360px, 0);
}

/* Mob menu animation cirkel */
.mob-submenu2-open.circle:checked~.mob-submenu2-item {
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.mob-submenu2-open.circle:checked~.mob-submenu2-item:nth-child(3) {
  transition-duration: 160ms;
  transform: translate3d(-50px, 30px, 0);
}

.mob-submenu2-open.circle:checked~.mob-submenu2-item:nth-child(4) {
  transition-duration: 240ms;
  transform: translate3d(-100px, 15px, 0);
}

.mob-submenu2-open.circle:checked~.mob-submenu2-item:nth-child(5) {
  transition-duration: 320ms;
  transform: translate3d(-125px, -30px, 0);
}

.mob-submenu2-open.circle:checked~.mob-submenu2-item:nth-child(6) {
  transition-duration: 400ms;
  transform: translate3d(-125px, -80px, 0);
}

.mob-submenu2-open.circle:checked~.mob-submenu2-item:nth-child(7) {
  transition-duration: 480ms;
  transform: translate3d(-100px, -120px, 0);
}

.mob-submenu2-open.circle:checked~.mob-submenu2-item:nth-child(8) {
  transition-duration: 560ms;
  transform: translate3d(-55px, -145px, 0);
}

/* Mob menu animation custom */
.mob-submenu2-open.custom:checked~.mob-submenu2-item:nth-child(3) {
  transition-duration: 170ms;
  transform: translate3d(-25px, -50px, 0);
}

.mob-submenu2-open.custom:checked~.mob-submenu2-item:nth-child(4) {
  transition-duration: 250ms;
  transform: translate3d(-50px, -100px, 0);
}

.mob-submenu2-open.custom:checked~.mob-submenu2-item:nth-child(5) {
  transition-duration: 330ms;
  transform: translate3d(-75px, -150px, 0);
}

.mob-submenu2-open.custom:checked~.mob-submenu2-item:nth-child(6) {
  transition-duration: 410ms;
  transform: translate3d(-0, -100px, 0);
}

.mob-submenu2-open.custom:checked~.mob-submenu2-item:nth-child(7) {
  transition-duration: 490ms;
  transform: translate3d(-25px, -150px, 0);
}

.mob-submenu2-open.custom:checked~.mob-submenu2-item:nth-child(8) {
  transition-duration: 570ms;
  transform: translate3d(-50px, -200px, 0);
}

.hide_svg {
  position: absolute;
  z-index: -9999;
  top: -150px;
  left: -300px;
}

/* Large Devices, Wide Screens */
@media only screen and (max-width: 1200px) {}

/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {}

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
  .title h1 {
    font-size: 40px
  }

  .subtitle h2 {
    font-size: 20px;
  }

  .gametitle h2 {
    font-size: 20px;
  }

  .mob-submenu2 {
    position: absolute;
    right: 25px;
    bottom: 25px;
  }
}

/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {}