.ramka-7 {
    width: 200px; 
    height: 200px;
    background-color: #FFF;
    position: absolute;
    top: 30%;
    left: 40%;
    display: flex;
    align-items: center;
    justify-content: center;  
    font-size: 18px;
    font-family: 'Roboto Condensed', sans-serif; 
    box-shadow: inset 6px 6px 8px 0 rgba(0,0,0,0.4);
}
.ramka-7:after, 
.ramka-7:before {
    mix-blend-mode:multiply;
    filter:none;
    z-index: -1;
    content:'';
    width: calc(100% + 90px);
    height: calc(100% + 90px);
    position: absolute;
    animation: anim-ramka-7 8s ease-in-out infinite;
}
@keyframes anim-ramka-7 {
    0%, 100% {
        clip-path: polygon(0 0, calc(100% - (33px)) calc(0% + (33px)), 100% 100%, calc(0% + (33px)) calc(100% - (33px)));
    }
    50% {
        clip-path: polygon(calc(0% + (33px)) calc(0% + (33px)), 100% 0, calc(100% - (33px)) calc(100% - (33px)), 0 100%);
    }
}
.ramka-7:after{
    animation-delay: -5s;
    background-color: #337AB7;
    clip-path: polygon(0 0, calc(100% - (33px)) calc(0% + (33px)), 100% 100%, calc(0% + (33px)) calc(100% - (33px)));
}
.ramka-7:before {
    background-color: #b70c0c;
    clip-path: polygon(calc(0% + (33px)) calc(0% + (33px)), 100% 0, calc(100% - (33px)) calc(100% - (33px)), 0 100%);
}
.ramka-7:hover:before, 
.ramka-7:hover:after {
    animation-play-state: paused;
}