/*--------------------- video ---------------------*/
#vid_container { background: transparent; position: relative; }
#vid_container #vid { position: absolute; width:300px; height: 250px; top:0; left:0;}
#vid_container #controls { position: absolute; background: transparent; width: 65px; height:30px; left: 36px; top: 10px; z-index: 100;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#vid_container .control_container { width:24px; height: 22px; cursor: pointer; }
#vid_container .control_container:hover .control { fill: #fff; opacity:.6; }
#vid_container .control_container .control { fill: #fff; opacity:.3; }
#vid_container #controls #vid_pause,
#vid_container #controls #vid_play { left: 40px; top: 0px; }
#vid_container #controls #vid_unmute,
#vid_container #controls #vid_mute { left: 10px; top: 0px; }

#vid_container #btn_close { width: 20px; height: 20px; top: 9px; left: 9px; border-radius: 4px; border: 2px solid white; opacity: .3; z-index: 100;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#vid_container #btn_close .rec { background: white; width: 2.5px; height: 20px; }
#vid_container #btn_close div:nth-child(1) { transform: rotate(45deg); }
#vid_container #btn_close div:nth-child(2) { transform: rotate(-45deg); }

#vid_container #btn_replay:hover,
#vid_container #btn_close:hover  { opacity: .6; }

#vid_container #btn_replay { width: 28px; height: 28px; top: 0px; right: 0px; z-index: 100; display: flex; justify-content: center; align-items: center; opacity: .3; }
#vid_container #btn_replay svg { width: 18px; height: 18px; }
#vid_container #btn_replay path { bottom: 7px; left: 7px; }

#vid_container #btn_replay:hover { animation:spin .5s ease-in-out 1; }

@keyframes spin { 
    from { 
        transform: rotate(0deg); 
    } to { 
        transform: rotate(-360deg); 
    }
}