body {
    background-color: rgb(54, 54, 54);
    height: 100%;
}

#emendatecont {
    position: absolute;
    top: 10px; 
    right: 25px; 
} 


.emendatemoveright {
    animation-name: emendatemoveright;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
    @keyframes emendatemoveright {
        from {right: 30px;}
        to {right: 400px;}

    }
.emendatemoveleft {
    animation-name: emendatemoveleft;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
    @keyframes emendatemoveleft {
        from {right: 400px;}
        to {right: 30px;}
    }


#iframecontent{
    height: 100vh;
    float: left;
    
}


.iframephonewidth {
    width: 480px;
    margin-left: calc(50% - 240px); 
}

.iframedesktopwidth {
    width: 100%;
}

.openiframe {      
    animation-name: tiltiframein;
    animation-duration: 1s;
    
    animation-fill-mode: forwards;
}
    @keyframes tiltiframein {
        from {transform:  rotateY(0deg);}
        to {transform: perspective(15cm) rotateY(11deg) scale(.75);}
    }

.closeiframe {
        
    animation-name: tiltiframeout;
    animation-duration: 1s;
        
    animation-fill-mode: forwards;
}
    @keyframes tiltiframeout {
        from {transform:  perspective(15cm) rotateY(11deg) scale(.75);}
        to {transform: rotateY(0deg);}
    }

#rightsidebox {
    right: -380px; 
    width: 370px;
    height: 100%;
    position: fixed;
    background-color: rgb(235, 235, 235);
    overflow: scroll;
}

.openrightsidebox {
    animation-name: leftboxin;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
    @keyframes leftboxin {
        from {right: -380px;}
        to {right: 0px;}
    }

.closerightsidebox {
    animation-name: leftboxout;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
    @keyframes leftboxout {
        from {right: 0px;}
        to {right: -380px;}
    }


/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/