@media only screen
  and (max-width : 700px){
  #boxwrap{
    height: 100px;
  }
  #giftbox{
    margin-left: 32%;
    margin-right: 32%;
    margin-bottom: 25%;
  }
  #box{
    height: 25vw;
  }
  #boxwrap .lace{
    height: 25vw;
  }
  #gift{
    height: 20vw;
  }
  #boxlid{
    height: 8vw;
  }
  #boxlid .ribbon{
    border: 1.5vw solid;
  }
  #box-shade{
    height: 6vw;
    top: 3vw;
  }
}
@media only screen
  and (min-width : 701px){
  #boxwrap{
    height: 200px;
  }
  #giftbox{
    margin-left: 23%;
    margin-right: 23%;
    margin-bottom: 23%;
  }
  #box{
    height: 80%;
  }
  #boxwrap .lace{
    height: 80%;
  }
  #gift{
    height: 80%;
    width: 80%;
    min-width: auto;
    min-height: auto;
  }
  #boxlid{
    height: 25%;
  }
  #boxlid .ribbon{
    border: 10px solid;
  }
  #box-shade{
    height: 20%;
    top: 10%;
  }
}

#top-lace{
  position: absolute;
  left: 40%;
  height: 100%;
  right: auto;
  width: 20%;
  /*background: orange;*/
}

.lace{
  position: absolute;
  left: 40%;
  right: auto;
  width: 20%;
  background: orange;
  /*height: 100%;*/
}

/*invisible wrapper*/
#giftbox{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25%;
}

/**/
#boxwrap{
  position: relative;
  /*height: 200px;*/
  width: 400px;
}


#box{
  z-index: 0;
  width: 100%;
  position: absolute;
  /*height: 80%;*/
}

/*lid of the box */
#boxlid{
  position: absolute;
  left: -5%;
  top: -5%;
  right: auto;
  width: 110%;
  /*height: 25%;*/
  z-index: 4;
}

#boxlid .ribbon{
  border-radius: 50%;
  /*border: 10px solid;*/
  z-index: 5;
  right: auto;
  width: 20%;
  height: 100%;
  top: -95%;
}

#left-loop{
  position: absolute;
  left: 23%;
  transform: translateX(45%) skewY(40deg);
}

#right-loop{
  position: absolute;
  left: 39%;
  transform: translateX(45%) skewY(-40deg);
}

.inner-loop{
  border-radius: 50%;
  height: 40%;
  width: 50%;
  left: 25%;
  top: 30%;
  /*background: #c4c4c4;*/
  position: absolute;
  z-index: 20;
}

/*lace on the lid*/
#boxlid.lace{
  z-index: 5;
  height: 100%
}

#boxwrap .lace{
  z-index: 2;
  /*height: 80%*/
}

#box-shade{
  position: absolute;
  /*top: 10%;*/
  /*height: 20%;*/
  width: 100%;
  background: black;
  opacity: 0.4;
  z-index: 3;
  overflow: hidden;
}

#box-shade.shade-gone{
  height: 0;
  transition: 0.15s ease-in;
}

#gift{
  position: absolute;
  left: 10%;
  /*height: 80%;*/
  width: 75%;
  top: 0;
  right: auto;
  z-index:-1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.wobble-one{
  animation: wobble 0.5s linear infinite forwards;
}

.wobble-two{
  animation: wobble 0.5s linear infinite  0.1s forwards;
}

.fly-up{
  animation: flyUp 0.4s ease-in forwards;
}

.fly-down{
  animation: flyDown 0.4s ease-in forwards;
}

.opened-gift{
  animation: openedGift 0.4s ease-in forwards;
}

@keyframes wobble {
  25% {
    transform: rotate(4deg);
  }
  75% {
    transform: rotate(-2deg);
  }
}

@keyframes flyUp {
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(-700%);
  }
}

@keyframes flyDown {
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(80%) scale(0.8);
  }
}

@keyframes openedGift {
  0% {
    opacity: 1;
    z-index: -1;

  }
  50% {
    transform: translateY(-140%) scale(0.8);
    z-index: -1;

  }

  100% {
    transform: translateY(-120%) scale(3);
    z-index: 5;
  }
}