body {
  background: transparent
}

.collapsed {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity 0s;
  transition: opacity 0s;
  width: 100%;
  height: 150px;
  height: 100%;
  background: url("../assets/background_small.png") no-repeat;
  background-position: center center;
  background-size: cover
}

@media (max-height: 155px) {
  .collapsed {
    opacity: 1
  }
}

.expand {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity 0s;
  transition: opacity 0s;
  width: 100%;
  height: 400px;
  height: 76%;
  background: url("../assets/background.png") no-repeat;
  background-position: center center;
  background-size: cover
}

@media (min-height: 155px) {
  .expand {
    opacity: 1
  }
}

.expand .croc {
  position: absolute;
  bottom: 0;
  height:115%;
  right: 0
}

.expand [jp-controls] {
  position: absolute;
  bottom: 0px;
  /* left: 35px; */
  /* width: 610px;
  height: 334px */
  width:102.5%;
  transform: translate(5%, -16%);
}


.expand .bamboo {
  position: absolute;
    bottom: 0;
    left: 0;
    width: 115%;

    pointer-events: none;
}

.expand .leaves_middle {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.expand #video_wrapper {
  position: absolute;
  bottom: -10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 300px
}

.expand .leaves_lt {
  position: absolute;
  top: 0;
  left: 50px;
}

.expand .leaves_rt {
  position: absolute;
  top: 0;
  right: 0
}

.expand .leaves_lb {
  position: absolute;
  bottom: 0;
  left: 0
}

.expand .leaves_rb {
  position: absolute;
  bottom: 0;
  right: 0;
  height:60%;
}

.expand .monkey {
  position: absolute;
  bottom: 0;
  left: 0;
  height:115%;
}

.expand .logo {
  position: absolute;
  bottom: 60px;
  right: -190px;
  height:100px;
}
.jp-controls-holder{
  padding-left:14px;
  padding-bottom: 16px;
}
.monkey {
  pointer-events: none;
}

@media (max-width: 1200px) {
  .expand .leaves_middle {
    display: none
  }

}

/* @media (max-width: 1200px) {
  .expand .monkey {
    left: -100px;
  }
} */

/* @media (max-width: 900px) {
  .expand .monkey {
    left: -200px;
  }
} */