.go-home {
  display: grid;
  position: fixed;
  /* top: -270px;
  right: -270px;   */
  top: -370px;
  right: -370px;
  width: 400px;
  height: 400px;
  transform: rotate(45deg);
  background-color: #2c3e50; /* slightly bluer dark grey */
  text-align: center;
  color: white;
  z-index: 3000;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: -5px 5px 20px rgba(0,0,0,0.3);
}

.go-home h1 {
  align-self: end;
  font-size: 26px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin-bottom: 20px;
}

.go-home:hover {
  cursor: pointer;
  /* transform: translateX(-10px); */
  top: -260px;
  right: -260px;
  background-color: #34495e;
}

nav {
  position: fixed;
  bottom: -60px;
  right: -1200px;
  z-index: 100;
  transform: rotate(-45deg);
  height: 600px;
  text-align: center;
}

.nav-reveal {
  opacity: 1;
  animation: 1s nav-fade-in cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes nav-fade-in {
  0% {
    opacity: 0;
    transform: rotate(-45deg) translateY(50px);
  }
  100% {
    opacity: 1;
    transform: rotate(-45deg) translateY(0);
  }
}

.tab {
  height: 8000px;
  width: 3000px;
  text-align: center;
  box-shadow: 0 -10px 40px rgba(0,0,0, 0.25);
  color: white;
  box-sizing: border-box;
  padding-top: 10px;
  transition: transform .3s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s ease;
}

.tab:hover {
  cursor: pointer;
  transform: translateY(-40px);
  filter: brightness(1.1);
}

.tab h1 {
  margin: 0;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.5px;
}

.tab p {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 300;
  opacity: 0.9;
}

.nav_title {
  text-align: center;
  position: relative;
  top: -100px;
  left: -300px;
}

.nav_title_img {
  height: 240px;
  width: 300px;
  position: relative;
  top: 39px;
}

.tab1 {
  background: linear-gradient(135deg, #F06236, #D94418);
  /* background: linear-gradient(to right, #F06236 50%, #532214 80%); */
  position: relative;
  top: 0px;
}

.tab2 {
  background: linear-gradient(135deg, #FF6450, #CC4030);
  /* background: rgb(78, 78, 78); */
  /* background: linear-gradient(to right, rgb(78, 78, 78) 50%, rgb(24, 24, 24) 70%); */
  position: relative;
  top: -7940px;
  z-index: 101;
}

.tab3 {
  background: linear-gradient(135deg, #227E78, #175854);
  /* background: rgb(40,40,40); */
  /* background: linear-gradient(to right, rgb(40,40,40) 50%, #000000 70%); */
  position: relative;
  top: -15880px;
  z-index: 102;
}

.tab4 {
  background: linear-gradient(135deg, #2c3e50, #1a252f);
  /* background: rgb(10,10,10); */
  /* background: linear-gradient(to right, rgb(40,40,40) 50%, #000000 70%); */
  position: relative;
  top: -15080px;
  z-index: 103;
}

@media screen and (min-width: 468px) {
  
  .tab {
    height: 7000px;
    width: 2900px;
    text-align: center;
    /* box-shadow: -1px -1px 9px #333; */
    color: white;
    box-sizing: border-box;
    padding-top: 8px;
    transition: transform .3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  
  .tab:hover {
    cursor: pointer;
    transform: translateY(-40px);
  }
  
  .tab h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
  }
  
  .tab p {
    margin: 5px 0 0;
    font-size: 15px;
    opacity: 0.8;
  }
  
  .tab1 {
    /* background: rgb(255, 157, 121); */
    background: linear-gradient(135deg, #F06236, #D94418);
    position: relative;
    top: -30px;
    animation: .5s tab1bounce forwards;
    animation-delay: 1.9s;
  }
  
  .tab2 {
    background: linear-gradient(135deg, #5D6D7E, #455465);
    position: relative;
    top: -6950px;
    z-index: 101;
    animation: .5s tab2bounce forwards;
    animation-delay: 1.7s;
    
  }
  
  .tab3 {
    background: linear-gradient(135deg, #34495E, #283747);
    /* background: rgb(78, 78, 78); */
    position: relative;
    top: -13870px;
    z-index: 102;
    animation: .5s tab3bounce forwards;
    animation-delay: 1.5s;
  }
  
  .tab4 {
    background: linear-gradient(135deg, #1C2833, #111820);
    /* background: rgb(78, 78, 78); */
    position: relative;
    top: -20790px;
    z-index: 103;
    animation: .5s tab4bounce forwards;
    animation-delay: 1.3s;
  }

  @keyframes tab1bounce {
    0% {
      top: -30px;
    }
    75% {
      top: -60px;
    }
    100% {
      top: -30px;
    }
  }

  @keyframes tab2bounce {
    0% {
      top: -6950px;
    }
    75% {
      top: -6980px;
    }
    100% {
      top: -6950px;
    }
  }

  @keyframes tab3bounce {
    0% {
      top: -13870px;
    }
    75% {
      top: -13900px;
    }
    100% {
      top: -13870px;
    }
  }

  @keyframes tab4bounce {
    0% {
      top: -20790px;
    }
    75% {
      top: -20820px;
    }
    100% {
      top: -20790px;
    }
  }
}



.bottom-tab {
  box-shadow: none;
  position: relative;
  z-index: 111;
}

.toBottomCorner {
  animation: 1.6s moveToBottomCorner forwards;
}

.toTopCorner {
  animation: .35s moveToTopCorner forwards;
}

@media screen and (max-width: 468px) {
  .toBottomCorner {
    animation: none;
  }

  .toTopCorner {
    animation: 1.2s ease-in moveToTopCornerMobile forwards;
  }
}

.inTopCorner {
  position: fixed;
  top: 0;
  left: 0;
}

.inBottomCorner {
  position: fixed;
  bottom: 0;
  left: 0;
}

@keyframes moveToTopCorner {
  0% {

  }
  50% {
    /* transform: rotate(1deg); */
    transform: translateY(5px);
  }
  100% {
    /* transform: translateX(-200vw);
    transform: translateY(-200vh); */
  }
}

@keyframes moveToTopCornerMobile {
  0% {

  }
  50% {

  }
  100% {
    /* transform: translateX(-1500px); */
    transform: translateY(-3500px);
  }
}

@keyframes moveToBottomCorner {
  0% {

  }
  50% {
    right: -400px;
    top: -400px;
  }
  100% {
    top: -250px;
    right: -250px;
  }
}