#MainContent.show-viewer{
    z-index: 5;
}
#test{
    text-align: center;
}
#arty-viewer-popup{
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10;
    animation-name: closePopup;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-duration: 0.4s;
    overflow: hidden;
}
#arty-viewer-popup.show-viewer{
    display: flex;
    animation-name: showPopup;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-duration: 0.8s;
}
#arty-viewer-popup iframe{
    width: 100%;
    height: 100%;
}
.viewer-iframe-wrapper{
    width: 90%;
    height: 95%;
    background-color: white;
}

@keyframes showPopup {
    from {opacity: 0;}
    to {opacity: 1;}
}


@keyframes closePopup {
    from {opacity: 1;}
    to {opacity: 0;}
}