html, body {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: #f18e21;
}

.board {
  display: flex;
  align-items: center;
  height: 100vh;
  text-align: center;
}

.board .main-content {
  flex: 1;  
  margin-top: -3vw;
}

h1 {
  color: #282424;
  font-size: min(4.68vw, 7vh);
  line-height: 4.5vw;
  margin: 0;
}

h2 {
  color: #771f2f;
  font-size: min(4.3vw, 6vh);
  margin: 0;
}

p {
  color: #131110;
  font-size: 1.2vw;
  margin-bottom: min(2.86vw, 5vh);
  margin-top: 1vw;
}

.student-level {
  position: absolute;
  top: 4.5vw;
  right: 10vw;
  cursor: pointer;
  /*display: none;*/
}

.student-level p {
  color: #1c1b1a;
  font-size: 1.07vw;
  margin: 0 0 0.6vw;
  font-weight: bold;
}

.student-level .level {
  background-color: #cb651d;
  border-radius: 4vw;
  height: 3.4vw;
  z-index: 2;
}

.student-level .level:before {
  content: '';
  position: absolute;
  bottom: -0.3vw;
  width: 4.1vw;
  height: 4.1vw;
  border-radius: 50%;
  background-color: #ffffff;
  z-index: 2;
  transition: all .3s;
}

.student-level .level.v1:before {
  left: 0;
}

.student-level .level.v2:before {
  left: 51%;
}

.student-level .level button {
  color: #721b2c;
  font-size: 1.1vw;
  position: absolute;
  width: 50%;
  height: 3.4vw;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
}

.student-level .level button:nth-child(2) {
  right: 0;
}

.student-level .level.v1 button:nth-child(1),
.student-level .level.v2 button:nth-child(2) {
  color: #282424;
}

.wrapper {
  width: 76.7vw;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

.wrapper .item {
  position: relative;
  flex-basis: 25%;
  height: 13vw;
  margin-bottom: min(3.4vw, 6.2vh);
  cursor: pointer;
  z-index: 1;
  max-height: max(200px, 20vh);
}

.wrapper .item:hover {
  z-index: 10;
}

.wrapper .item img {
  max-width: 13vw;
  max-height: 17vh;
  position: relative;
  z-index: 2;
  top: 0;
  transform: scale(1);
  transition: all .3s;
}

.wrapper .item.calendar img {
  max-height: 15vh;
  margin-top: 1vw;
}

.wrapper .item:hover img {
  top: -4vw;
}

.wrapper .item.global-traditions:hover img {
  content: url('https://s3.amazonaws.com/PandaExpressWebsite/lny/img/home/global-traditions-hover.png');
}

.wrapper .item.red-envelope:hover img {
  content: url('https://s3.amazonaws.com/PandaExpressWebsite/lny/img/home/red-envelope-hover.png');
}

.wrapper .item.trivia-dragon:hover img {
  content: url('https://s3.amazonaws.com/PandaExpressWebsite/lny/img/home/trivia-dragon-hover.png');
}

.wrapper .item.lucky-food:hover img {
  content: url('https://s3.amazonaws.com/PandaExpressWebsite/lny/img/home/food-hover.png');
  top: -3vw;
}

.wrapper .item.calendar:hover img {
  content: url('https://s3.amazonaws.com/PandaExpressWebsite/www/rpg-hover.png');
}

.wrapper .item.in-the-sky:hover img {
  content: url('https://s3.amazonaws.com/PandaExpressWebsite/lny/img/home/in-the-sky-hover.png');
}

.wrapper .item.zodiac:hover img {
  content: url('https://s3.amazonaws.com/PandaExpressWebsite/www/zodiac-tiger-hover.png');
  top: -5.5vw;
}

.wrapper .item.chinese-characters:hover img {
  content: url('https://s3.amazonaws.com/PandaExpressWebsite/lny/img/home/chinese-characters-hover.png');
}

.wrapper .item .shadow {
  width: 6.9vw;
  height: 2.18vw;
  background-color: #dc7419;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
}

.wrapper .item .circle {
  display: flex;
  flex-direction: column-reverse;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #f89f43;
  width: 23.9vw;
  height: 23.9vw;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  padding: 3vw;
  box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transition: all .3s;
}

.wrapper .item:hover .circle {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.wrapper .item .circle h3 {
  color: #771f2f;
  font-size: 1.9vw;
  margin: 0 0 0.6vw;
}

.wrapper .item .circle p {
  color: #100f0d;
  margin: 0;
}

.popup-bg {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 5;
}

.popup {
  width: 44%;
  height: 35%;
  top: 30%;
  display: flex;
  flex-direction: column;
}

.popup .wrap {
  display: flex;
}

.popup .wrap button {
  color: #f18e21;
  font-size: 1.04vw;
  border: 2px solid #f18e21;
  background-color: transparent;
  padding: 0 2.8vw;
  margin: 0 1.25vw;
  transition: all .3s;
}

.popup .wrap button.active,
.popup .wrap button:hover {
  color: #282424;
  background-color: #f18e21;
}

.popup h4 {
  color: #110f0d;
  font-size: 1.3vw;
  line-height: 1;
  margin: 0 0 1.9vw;
  font-family: museo-sans-rounded, sans-serif;
  font-style: normal;
}

.select-grade-popup {
  visibility: hidden;
  opacity: 0;
  transition: all .3s;
}

.select-grade-popup.visible {
  visibility: visible;
  opacity: 1;
}

a.download-guide {
  display: block;
    position: absolute;
    left: calc(50vw + 20px);
    bottom: 4vh;
    font-size: min(1.2vw, 20px);
    font-weight: 500;
    color: #000;
    text-decoration: none;
    padding-left: 1.5vw;
    background: url(../img/download-icon.svg) no-repeat 1vw center;
    background-size: 0.75vw;
    border: 2px solid #FFF;
    padding: 1vw 1.5vw 1vw 2.5vw;
    border-radius: 4vw;
    transition: box-shadow .3s, background-color .3s;
    font-weight: bold;
}

a.download-guide:hover {
  box-shadow: 0 5px 10px rgb(0 0 0 / 25%);
  background-color: #FFF;
}

a.download-activity-booklet {
  display: block;
    position: absolute;
    right: calc(50vw + 20px);
    bottom: 4vh;
    font-size: min(1.2vw, 20px);
    font-weight: 500;
    color: #000;
    text-decoration: none;
    padding-left: 1.5vw;
    background: url(../img/download-icon.svg) no-repeat 1vw center;
    background-size: 0.75vw;
    border: 2px solid #FFF;
    padding: 1vw 1.5vw 1vw 2.5vw;
    border-radius: 4vw;
    transition: box-shadow .3s;
    background-color: #FFF;
    font-weight: bold;
}

a.download-activity-booklet:hover {
  box-shadow: 0 5px 10px rgb(0 0 0 / 25%);
}