/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.gift-box-container {
  scale: 150%;
  width: 20vh;
  height: 20vh;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-40%, -50%);
  -ms-transform: translate(-40%, -50%);
  transform: translate(-40%, -50%);
  z-index: 100;
  -webkit-perspective: 40vh;
  perspective: 40vh;
  -webkit-animation: fly-down 1s ease-in-out;
  animation: fly-down 1s ease-in-out;
}

.gift-box {
  --gift-box-color: #e63946;
  --gift-box-edge-color: #590b11;
  --wrap-color: #f1faee;
  --wrap-ribbon-color: #c0e4e6;
  --wrap-top-color: #d8efef;
  width: 20vh;
  height: 10vh;
  position: relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  -o-transition: transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
  -webkit-animation: rotation-3d 20s infinite linear;
  animation: rotation-3d 20s infinite linear;
}

.box-door {
  width: 20vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.box-body {
  width: 20vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.gift-box .gift-box__side,
.gift-box .gift-box__end {
  position: absolute;
  width: 20vh;
  height: 20vh;
  border: 2px solid var(--gift-box-edge-color);
}

.gift-box .gift-box-lid__side {
  position: absolute;
  width: 22vh;
  height: 5vh;
  border: 2px solid var(--gift-box-edge-color);
}

.gift-box .gift-box-lid__end {
  position: absolute;
  width: 22vh;
  height: 22vh;
  border: 2px solid var(--gift-box-edge-color);
}

.gift-box .gift-box__side,
.gift-box .gift-box-lid__side {
  background: -o-linear-gradient(left, var(--gift-box-color) 40%, var(--wrap-color) 40%, var(--wrap-color) 60%, var(--gift-box-color) 60%);
  background: -webkit-gradient(linear, left top, right top, color-stop(40%, var(--gift-box-color)), color-stop(40%, var(--wrap-color)), color-stop(60%, var(--wrap-color)), color-stop(60%, var(--gift-box-color)));
  background: linear-gradient(to right, var(--gift-box-color) 40%, var(--wrap-color) 40%, var(--wrap-color) 60%, var(--gift-box-color) 60%);
}

.gift-box .gift-box__end,
.gift-box .gift-box-lid__end {
  background: -o-linear-gradient(left, transparent 40%, var(--wrap-top-color) 40%, var(--wrap-top-color) 60%, transparent 60%), -o-linear-gradient(top, var(--gift-box-color) 40%, var(--wrap-color) 40%, var(--wrap-color) 60%, var(--gift-box-color) 60%);
  background: -webkit-gradient(linear, left top, right top, color-stop(40%, transparent), color-stop(40%, var(--wrap-top-color)), color-stop(60%, var(--wrap-top-color)), color-stop(60%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(40%, var(--gift-box-color)), color-stop(40%, var(--wrap-color)), color-stop(60%, var(--wrap-color)), color-stop(60%, var(--gift-box-color)));
  background: linear-gradient(to right, transparent 40%, var(--wrap-top-color) 40%, var(--wrap-top-color) 60%, transparent 60%), linear-gradient(to bottom, var(--gift-box-color) 40%, var(--wrap-color) 40%, var(--wrap-color) 60%, var(--gift-box-color) 60%);
}

.gift-box .gift-box__side--front {
  -webkit-transform: rotateY(0deg) translateZ(10vh);
  transform: rotateY(0deg) translateZ(10vh);
}

.gift-box .gift-box__side--back {
  -webkit-transform: rotateY(180deg) translateZ(10vh);
  transform: rotateY(180deg) translateZ(10vh);
}

.gift-box .gift-box__side--left {
  -webkit-transform: rotateY(-90deg) translateZ(10vh);
  transform: rotateY(-90deg) translateZ(10vh);
}

.gift-box .gift-box__side--right {
  -webkit-transform: rotateY(90deg) translateZ(10vh);
  transform: rotateY(90deg) translateZ(10vh);
}

.gift-box .gift-box__side--top {
  -webkit-transform: rotateX(90deg) translateZ(10vh);
  transform: rotateX(90deg) translateZ(10vh);
}

.gift-box .gift-box__side--bottom {
  -webkit-transform: rotateX(-90deg) translateZ(10vh);
  transform: rotateX(-90deg) translateZ(10vh);
}

.gift-box .gift-box-lid__side--front {
  -webkit-transform: rotateY(0deg) translateZ(11vh) translateX(-1vh) translateY(-1vh);
  transform: rotateY(0deg) translateZ(11vh) translateX(-1vh) translateY(-1vh);
}

.gift-box .gift-box-lid__side--back {
  -webkit-transform: rotateY(180deg) translateZ(11vh) translateX(1vh) translateY(-1vh);
  transform: rotateY(180deg) translateZ(11vh) translateX(1vh) translateY(-1vh);
}

.gift-box .gift-box-lid__side--left {
  -webkit-transform: rotateY(-90deg) translateZ(12vh) translateY(-1vh);
  transform: rotateY(-90deg) translateZ(12vh) translateY(-1vh);
}

.gift-box .gift-box-lid__side--right {
  -webkit-transform: rotateY(90deg) translateZ(10vh) translateY(-1vh);
  transform: rotateY(90deg) translateZ(10vh) translateY(-1vh);
}

.gift-box .gift-box-lid__side--top {
  -webkit-transform: rotateX(90deg) translateZ(12vh) translateX(-1vh) translateY(0);
  transform: rotateX(90deg) translateZ(12vh) translateX(-1vh) translateY(0);
}

.gift-box .ribbon-l {
  position: absolute;
  width: 7vh;
  height: 7vh;
  border: 2px solid var(--wrap-ribbon-color);
  border-radius: 50% 50% 0 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: rotateX(75deg) rotateY(90deg) translateZ(calc(8vh - var(--gift-box-position))) translateX(-8.5vh) translateY(-7.5vh) skewY(30deg);
  transform: rotateX(75deg) rotateY(90deg) translateZ(calc(8vh - var(--gift-box-position))) translateX(-8.5vh) translateY(-7.5vh) skewY(30deg);
}

.gift-box .ribbon-r {
  position: absolute;
  width: 7vh;
  height: 7vh;
  border: 2px solid var(--wrap-ribbon-color);
  border-radius: 50% 50% 0 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: rotateX(-5deg) rotateY(90deg) translateZ(calc(8vh - var(--gift-box-position))) translateX(-3vh) translateY(-11vh) skewY(30deg);
  transform: rotateX(-5deg) rotateY(90deg) translateZ(calc(8vh - var(--gift-box-position))) translateX(-3vh) translateY(-11vh) skewY(30deg);
}

.ribbon-l-end {
  position: absolute;
  width: 4vh;
  height: 11vh;
  background: -o-linear-gradient(45deg, var(--wrap-top-color) 72%, transparent 72%), -o-linear-gradient(135deg, var(--wrap-top-color) 72%, transparent 72%);
  background: linear-gradient(45deg, var(--wrap-top-color) 72%, transparent 72%), linear-gradient(-45deg, var(--wrap-top-color) 72%, transparent 72%);
  border: 2px solid var(--gift-box-edge-color);
  border-top: none;
  border-bottom: none;
  -webkit-transform: rotateX(-70deg) translateX(8vh) translateY(-8vh) translateZ(-6vh);
  transform: rotateX(-70deg) translateX(8vh) translateY(-8vh) translateZ(-6vh);
}

.ribbon-r-end {
  position: absolute;
  width: 4vh;
  height: 11vh;
  background: -o-linear-gradient(45deg, var(--wrap-top-color) 72%, transparent 72%), -o-linear-gradient(135deg, var(--wrap-top-color) 72%, transparent 72%);
  background: linear-gradient(45deg, var(--wrap-top-color) 72%, transparent 72%), linear-gradient(-45deg, var(--wrap-top-color) 72%, transparent 72%);
  border: 2px solid var(--gift-box-edge-color);
  border-top: none;
  border-bottom: none;
  -webkit-transform: rotateX(80deg) translateX(8vh) translateY(-8vh) translateZ(6vh);
  transform: rotateX(80deg) translateX(8vh) translateY(-8vh) translateZ(6vh);
}

@-webkit-keyframes rotation-3d {
  from {
    -webkit-transform: translateZ(-10vh) rotateY(50deg) rotateX(-5deg) rotateZ(-30deg);
    transform: translateZ(-10vh) rotateY(50deg) rotateX(-5deg) rotateZ(-30deg);
  }
  to {
    -webkit-transform: translateZ(-10vh) rotateY(409deg) rotateX(-5deg) rotateZ(-30deg);
    transform: translateZ(-10vh) rotateY(409deg) rotateX(-5deg) rotateZ(-30deg);
  }
}
@keyframes rotation-3d {
  from {
    -webkit-transform: translateZ(-10vh) rotateY(50deg) rotateX(-5deg) rotateZ(-30deg);
    transform: translateZ(-10vh) rotateY(50deg) rotateX(-5deg) rotateZ(-30deg);
  }
  to {
    -webkit-transform: translateZ(-10vh) rotateY(409deg) rotateX(-5deg) rotateZ(-30deg);
    transform: translateZ(-10vh) rotateY(409deg) rotateX(-5deg) rotateZ(-30deg);
  }
}
.close {
  -webkit-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
  -webkit-transform: 0;
  -ms-transform: 0;
  transform: 0;
  -webkit-animation: closing 3s !important;
}

.open {
  -webkit-transform: translateX(10vh) rotate(90deg) translateX(18vh) rotate(90deg) translateX(10vh) translateY(-5vh);
  -ms-transform: translateX(10vh) rotate(90deg) translateX(18vh) rotate(90deg) translateX(10vh) translateY(-5vh);
  transform: translateX(10vh) rotate(90deg) translateX(18vh) rotate(90deg) translateX(10vh) translateY(-5vh);
  -webkit-animation: opening 3s !important;
}

@-webkit-keyframes opening {
  0% {
    -webkit-transform: translateY(0vh);
    transform: translateY(0vh);
  }
  50% {
    -webkit-transform: translateY(-7vh);
    transform: translateY(-7vh);
  }
  100% {
    -webkit-transform: translateX(10vh) rotate(90deg) translateX(18vh) rotate(90deg) translateX(10vh) translateY(-7vh);
    transform: translateX(10vh) rotate(90deg) translateX(18vh) rotate(90deg) translateX(10vh) translateY(-7vh);
  }
}
@keyframes opening {
  0% {
    -webkit-transform: translateY(0vh);
    transform: translateY(0vh);
  }
  50% {
    -webkit-transform: translateY(-7vh);
    transform: translateY(-7vh);
  }
  100% {
    -webkit-transform: translateX(10vh) rotate(90deg) translateX(18vh) rotate(90deg) translateX(10vh) translateY(-7vh);
    transform: translateX(10vh) rotate(90deg) translateX(18vh) rotate(90deg) translateX(10vh) translateY(-7vh);
  }
}
@-webkit-keyframes closing {
  0% {
    -webkit-transform: translateX(10vh) rotate(90deg) translateX(18vh) rotate(90deg) translateX(10vh) translateY(-7vh);
    transform: translateX(10vh) rotate(90deg) translateX(18vh) rotate(90deg) translateX(10vh) translateY(-7vh);
  }
  50% {
    -webkit-transform: translateY(-7vh);
    transform: translateY(-7vh);
  }
  100% {
    -webkit-transform: translateY(0vh);
    transform: translateY(0vh);
  }
}
@keyframes closing {
  0% {
    -webkit-transform: translateX(10vh) rotate(90deg) translateX(18vh) rotate(90deg) translateX(10vh) translateY(-7vh);
    transform: translateX(10vh) rotate(90deg) translateX(18vh) rotate(90deg) translateX(10vh) translateY(-7vh);
  }
  50% {
    -webkit-transform: translateY(-7vh);
    transform: translateY(-7vh);
  }
  100% {
    -webkit-transform: translateY(0vh);
    transform: translateY(0vh);
  }
}
@-webkit-keyframes fly-down {
  0% {
    -webkit-transform: translateY(-100vh);
    transform: translateY(-100vh);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fly-down {
  0% {
    -webkit-transform: translateY(-100vh);
    transform: translateY(-100vh);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}