.img-fluid {
    height: auto;
    max-width: 100%;
}
.fade-leave {
    opacity: 1;
}
.fade-leave-active {
    transition: opacity 0.75s linear;
}
.fade-leave-to {
    opacity: 0;
}

.fade-enter {
    opacity: 0;
}
.fade-enter-active {
    transition: all 0.75s linear;
    position: absolute;
    top: 0;
    z-index: 2;
}
.fade-enter-to {
    opacity: 1;
}



/* style the elements with CSS */
#pleaserotate-graphic{
    fill: #fff;
}

#pleaserotate-backdrop {
    color: #fff;
    background-color: #000;
}

html, body {
    margin: 0px;
}

.desktop-demo-wrapper {
    height: auto;
    max-height: 100vh;
    width: auto;
    max-width: 100vw;
    overflow: hidden;
    /*text-align: center;*/
    display: flex;
    align-content: center;

    /*Vertical Center*/
    /*align-items: center;*/
    
    /*Horizontal Center*/
    justify-content: center;
}

.desktop-demo-inner-wrapper {
    overflow: hidden;
    margin: 0px auto;
    background-image: url('../backgrounds/index.svg');
    background-size: cover;
    background-repeat: no-repeat;
}

.desktop-demo-contents {
    margin: 0px auto;
    border: 0px;
    width: 1920px;
    height: 1080px;
    position: relative;

    /*Vertical Center*/
    /*transform-origin: center center;*/

    /*Horizontal Center*/
    /*transform-origin: top center;*/

    /*Top Left*/
    transform-origin: top left;
}