* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.btnvideo {
display: flex;
margin-top: auto;
flex-direction: column;
width: 70px;
height: 70px;
position: absolute;
justify-content: center;
align-items: flex-start;
right: 0;
bottom: 0;
background-color: white;
border-top-left-radius: 20px;
transition: all ease-in 150ms;
}
.btnvideo:before {
content: "";
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 20h20V0c0 11.047-8.953 20-20 20Z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
position: absolute;
bottom: 0px;
left: -20px;
}
.btnvideo:after {
content: "";
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 20h20V0c0 11.047-8.953 20-20 20Z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
position: absolute;
top:-20px;
right: 0px;
}
.btnvideo svg{
width: 50px;
height: 50px;
transition: all ease-in 150ms;
position: absolute;
right: 10px;
}
.btnvideo:hover svg,
.btnvideo:focus svg{
opacity: .8;
right:15px;
}
.btnvideo:hover,
.btnvideo:focus{
width: 75px;
height: 75px;
}
.btnvideo .icon {
flex-grow: 1;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
.lity-close {
width: 80px;
height: 80px;
text-indent: -9000px;
top: 50px;
right: 50px;
font-size: 0;
}
.lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited {
font-size: 0;
top: 50px;
right: 50px;
}
.lity-close:before {
content:'';
display: block;
width: 60px;
height: 60px;
background-color: rgba(255,255,255,.6);
mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 5 5 15M5 5l10 10' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-size: 300%;
transition: all ease-in 150ms;
}
.lity-close:hover:before,
.lity-close:focus:before {
background-color: rgba(255,255,255,1);
}