#container_product #wrapper_product {
    /* max-width: 60%; */
    perspective: 600px;
    perspective-origin: center center;
    transition: perspective-origin 1s;
}

#container_product #wrapper_product #product {
    /* position: relative; */
    transform-style: preserve-3d;
    transform: rotateY(0deg) rotateX(0deg);
    transition: transform 1s;

    --frameWidth: 300px;
    --frameHeight: 379px;
}

#container_product #wrapper_product.rotate {
    perspective-origin: right center;
}

#container_product #wrapper_product.rotate #product {
    transform: rotateY(-28deg) rotateX(0deg);
}

#iFrameDirectionCtrlBtn {
    margin-bottom: 30px;
    color: black;
}

#iFrameFrontFaceBtn,
#iFrameSideFaceBtn {
    background-image: url(https://www.artgalore.ca/style/images/icons/frameFrontBtn.png);
    display: inline-block;
    cursor: pointer;
    width: 62px;
    height: 75px;
    background-size: 100%;
    border: 1px solid gainsboro;
    margin: 0 10px;
}

#iFrameSideFaceBtn { background-image: url(https://www.artgalore.ca/style/images/icons/frameSideBtn.png);}

.frameCmn {
    position: absolute;
    z-index: 100;
    box-sizing: border-box;
}

.frameActive .frameRightFace {
    transform: rotateY(90deg) translateZ(20px) translateY(7px) translateX(20px);
    width: 30px;
    /* height: 96.4%;
    left: 86%; */
    /* height: calc(var(--frameHeight) * 1.01);
    left: calc(var(--frameWidth) * 0.908); */
    height: calc(var(--frameHeight) * 1.015);
    left: calc(var(--frameWidth) * 0.898);
    top: 1px;
    /* background: url(https://www.artgalore.ca/style/images/framing/molding/frame/cxgo-exterior2.jpeg) round; */
    background-size: cover;
}

#container_product #wrapper_product #product #container_original_image {
    width: var(--frameWidth);
    height: var(--frameHeight);
}

@media (min-width: 600px) {
    #container_product { padding-top: 30px; }
}

@media (min-width: 1200px) {
    #container_product {
        padding: 30px 80px 100px 80px !important;
    }
}