* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.btnvideo {
  display: flex;
  margin-top: auto;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  justify-content: center;
  align-items: flex-start;
  left: 0;
  top: 0;
}

.btnvideo svg{
  opacity: .5;
  transition: all ease-in 150ms;
}

.btnvideo:hover svg,
.btnvideo:focus svg{
  opacity: .8;
}


.btnvideo .icon {
flex-grow: 1;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}

.btnvideo .title {
  position: absolute;
  bottom: 0;
padding: 1rem;
width: 100%;
color:#fff;
font-family: inherit;
font-size: 1.2rem;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
}


.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: 100%;
  transition: all ease-in 150ms;
}

.lity-close:hover:before,
.lity-close:focus:before {
  background-color: rgba(255,255,255,1);
}