.rect-flip-front {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
}

.rect-flip-front-hover-up {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    transform: rotateX(180deg);
}

.rect-flip-front-hover-down {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    transform: rotateX(-180deg);
}

.rect-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 800;
    width: 100%;
    height: 100%;
}

/*.rect-flip:hover .back {*/
.rect-flip-back-hover-up {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transform: rotateX(180deg);
}

.rect-flip-back-hover-down {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transform: rotateX(-180deg);
}

.rect-up-front {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
}

.rect-up-front-hover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    transform: rotateX(180deg);
}

.rect-up-back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 800;
    width: 100%;
    height: 100%;
}

.rect-up-back-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 1000;
    transform: rotateX(180deg);
    transform-style: preserve-3d;
}

.rect-down-front {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
}

.rect-down-front-hover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    transform: rotateX(-180deg);
}

.rect-down-back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 800;
    width: 100%;
    height: 100%;
}

.rect-down-back-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transform: rotateX(-180deg);
}

.rect-right-front {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100%;
    height: 100%;
}

.rect-right-front-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    transform: rotateY(180deg);
}

.rect-right-back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
}

.rect-right-back-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1002;
    transform: rotateY(180deg);
}

.rect-left-front {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100%;
    height: 100%;
}

.rect-left-front-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    transform: rotateY(-180deg);
}

.rect-left-back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
}

.rect-left-back-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1002;
    transform: rotateY(-180deg);
}

.right-triangle-front {
    position: absolute;
    top: 0;
    left: -50%;
    z-index: 900;
    width: 100%;
    height: 100%;
}

.right-triangle-front-hover {
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    z-index: 900;
    transform: rotateY(180deg);
}

.right-triangle-back {
    position: absolute;
    top: 0;
    left: -50%;
    z-index: 800;
    width: 100%;
    height: 100%;
}

.right-triangle-back-hover {
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transform: rotateY(180deg);
}

.left-triangle-front {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
}

.left-triangle-front-hover {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
}

.left-triangle-back {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 800;
    width: 100%;
    height: 100%;
}

.left-triangle-back-hover {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transform: rotateY(180deg);
}

.left-down,
.left-up,
.right-down,
.right-up {
    visibility: hidden;
}

.left-down-triangle-front {
    z-index: 900;
    transform: rotate3d(45, 45, 0, 0deg);
    transform-style: preserve-3d;
}

.left-down-triangle-front-hover {
    z-index: 900;
    transform: rotate3d(-45, -45, 0, 180deg);
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

.left-down-triangle-back {
    transform: rotate3d(45, 45, 0, -180deg);
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;

}

.left-down-triangle-back-hover {
    z-index: 1000;
    transform: rotate3d(45, 45, 0, -0deg);
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

.left-up-triangle-front {
    z-index: 900;
    transform: rotate3d(0, 45, 0, 0deg);
    transform-style: preserve-3d;
}

.left-up-triangle-front-hover {
    z-index: 900;
    transform: rotate3d(45, -45, 0, 180deg);
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;

}

.left-up-triangle-back {
    transform: rotate3d(-45, 45, 0, -180deg);
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;

}

.left-up-triangle-back-hover {
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    z-index: 1000;
    transform: rotate3d(-45, 45, 0, -0deg);
    transform-style: preserve-3d;

}

.right-down-triangle-front {
    transform: rotate3d(0, 45, 0, 0deg);
    transform-style: preserve-3d;

}

.right-down-triangle-front-hover {
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    z-index: 900;
    transform: rotate3d(45, -45, 0, 180deg);
    transform-style: preserve-3d;
}

.right-down-triangle-back {
    transform: rotate3d(-45, 45, 0, -180deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
}

.right-down-triangle-back-hover {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
    z-index: 1000;
    transform: rotate3d(-45, 45, 0, -0deg);
    transform-style: preserve-3d;
}

.right-up-triangle-front {
    z-index: 900;
    transform: rotate3d(45, 45, 0, 0deg);
    transform-style: preserve-3d;
}

.right-up-triangle-front-hover {
    backface-visibility: hidden;
    z-index: 900;
    transform: rotate3d(-45, -45, 0, 180deg);
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden; /* Safari */
}

.right-up-triangle-back {
    transform: rotate3d(45, 45, 0, -180deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
}

.right-up-triangle-back-hover {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
    z-index: 1000;
    transform: rotate3d(45, 45, 0, -0deg);
    transform-style: preserve-3d;
}

/* END - Gift Wrapper animation */

.flipY180 {
    transition: all 1s ease-in 0.1s;
    transform: rotateY(180deg);
    transform-origin: 50% 100%;
    border-left: 2px solid #fff;
}

.flipY180Alter {
    transition: all 1s ease-in 0.1s;
    transform: rotateY(-180deg);
    transform-origin: 50% 100%;
}

.flipX180 {
    transform: rotateX(-180deg);
    /*transform-origin: center center;*/
}

.flipWithinX {
    transform: rotateX(-180deg);
    transform-origin: 50% 50%;
    background: none;
}

.rotate180 {
    transform: rotateX(180deg);
    transform-origin: center center;
}

.hideFrontDiv {
    transition: all 1s ease-in 0.1s;
    background: none;
}

.showBackDiv {
    transition: all 1s ease-in 0.1s;
    background: tomato;
}

.showRightTriangle {
    width: 0;
    height: 0;
    border-top: 125px solid transparent;
    border-bottom: 125px solid transparent;
    border-left: 125px solid tomato;
}

.showLeftTriangle {
    width: 0;
    height: 0;
    border-top: 125px solid transparent;
    border-bottom: 125px solid transparent;
    border-right: 125px solid tomato;
}

.showMiddleRectBorder {
    border-bottom: 2px solid maroon;
}

.complete {
    display: none;
}


.gift-experience__giftopening__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.EnvelopeFrontWrapper {
    margin: 0 auto;
    width: 600px;
    height: 400px;
    position: relative;
    top: 30%;
    left: 0;
}

.rect-flip {
    width: 400px;
    height: 200px;
    position: relative;
    top: 25%;
    left: 100px;
    perspective: 100vw;
    perspective-origin: center center;
}

@media (max-width: 700px) {

    .rect-flip {
        left: 0;
    }
}

.rect-flip-front {
    transition: all 1000ms ease-in 0s;
}

.front-top {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
    background: var(--wrapper_image)
}

.rect-flip-back {
    transition: all 1000ms ease-in 0s;
}

.envelope-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 200px;
}

.right {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

.right-triangle-front {
    transition: all 1000ms ease-in 0s;
}

.front-left {
    display: inline-block;
    vertical-align: top;
    z-index: 900;
    width: 49%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
}

.front-right {
    display: inline-block;
    vertical-align: top;
    width: 49%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
}

.right-triangle-back {
    transition: all 1000ms ease-in 0s;
}


.back-left {
    display: inline-block;
    vertical-align: top;
    z-index: 800;
    width: 48%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
}

.right-triangle-svg {
    transition: all 1000ms ease-in 0s;
}

.left-down {
    position: absolute;
    top: 0;
    right: 50%;
}

.left-down-triangle-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 50%;
    transition: all 1000ms ease-in 0s;
}

.left-down-triangle-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 50%;
    transition: all 1000ms ease-in 0s;
}

.left-up {
    position: absolute;
    top: 50%;
    right: 50%;
}

.left-up-triangle-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    transition: all 1000ms ease-in 0s;
}

.left-up-triangle-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    transition: all 1000ms ease-in 0s;
}

.left {
    width: 50%;
    height: 100%;
    position: absolute;
    right: -25%;
    top: 0;
    z-index: 1000;
}

.left-triangle-front {
    transition: all 1000ms ease-in 0s;
}

.left-triangle-back {
    transition: all 1000ms ease-in 0s;
}

.right-down {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 1000ms ease-in 0s;
}

.right-down-triangle-front {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100px;
    height: 100px;
    transition: all 1000ms ease-in 0s;
}

.right-down-triangle-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    transition: all 1000ms ease-in 0s;
}

.right-up {
    position: absolute;
    top: 50%;
    left: 0;
}

.right-up-triangle-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 50%;
    transition: all 1000ms ease-in 0s;
}

.right-up-triangle-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 50%;
    transition: all 1000ms ease-in 0s;
}

.back-right {
    display: inline-block;
    vertical-align: top;
    width: 49%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.rect-mask-left {
    width: 400px;
    height: 200px;
    position: absolute;
    top: 50%;
}

.rect-mask-left-inner {
    position: absolute;
    top: -50%;
    left: 0;
    width: 50%;
    height: 100%;
    transform: scale(-1);
    background: var(--wrapper_image)
}

.rect-mask-right {
    width: 400px;
    height: 200px;
    position: absolute;
    top: 50%;
}

.rect-mask-right-inner {
    position: absolute;
    top: -50%;
    left: 50%;
    width: 50%;
    height: 100%;
    transform: scale(-1);
    background: var(--wrapper_image)
}

.rect-up {
    width: 400px;
    height: 200px;
    position: relative;
    top: -50%;
    perspective: 100vw;
    perspective-origin: center center;
}

.rect-up-front {
    transition: all 1000ms ease-in 0s;
}

.rect-front-top {
    width: 100%;
    height: 50%;
    background: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
}

.rect-front-bottom {
    width: 100%;
    height: 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
    background: var(--wrapper_image)
}

.rect-up-back {
    transition: all 1000ms ease-in 0s;
}

.back-top {
    width: 100%;
    height: 50%;
    background: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
}

.back-bottom {
    width: 100%;
    height: 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
    background: var(--wrapper_image)
}

.rect-down {
    width: 400px;
    height: 200px;
    position: absolute;
    top: 50%;
    perspective: 100vw;
    perspective-origin: center center;
}

.rect-down-front {
    transition: all 1000ms ease-in 0s;

}

.rect-down-front-top {
    width: 100%;
    height: 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
    background: var(--wrapper_image)
}

.rect-down-front-bottom {
    width: 100%;
    height: 50%;
    background: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
}

.rect-down-back {
    transition: all 1000ms ease-in 0s;
}

.rect-down-back-top {
    width: 100%;
    height: 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
    background: var(--wrapper_image)
}

.rect-down-back-bottom {
    width: 100%;
    height: 50%;
    background: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
}

.envelope-right-left {
    width: 600px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 1000ms ease-in 0s;
    z-index: 1;

}

.rect-left {
    width: 600px;
    height: 400px;
    position: absolute;
    top: 0px;
    left: -300px;
    perspective: 100vw;
    perspective-origin: center center;
}

.rect-left-front {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 100%;
    background: var(--wrapper_image)
}

.envelope-front-left {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 100%;
    background: var(--wrapper_image)
}

.envelope-front-right {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 100%;
    background: none;
}

.rect-right-back {
    transition: all 1000ms ease-in 0s;
}

.envelope-back-left {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 100%;
    background: var(--wrapper_image)
}

.envelope-back-right {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 100%;
    background: none;
}

.envelope-back-face {
    background: var(--wrapper_image);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
}

@media (max-width: 700px) {
    .envelope-back-face {
        left: -100px;
    }
}

.flip-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    display: var(--experience-warpper-flip-display);
}

.rect-left-back {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 100%;
    background: var(--wrapper_image)
}

.rect-right {
    width: 400px;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 200px;
    perspective: 100vw;
    perspective-origin: center center;
}

.rect-right-front {
    transition: all 1000ms ease-in 0s;
}

.ShowBackFaceRectDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}