.video_player-wrapper video {
max-width: 100%;
}
.btn-play {
top:50%; 
left: 50%; 
transform: translate(-50%,-50%); 
z-index:3;
}
.btn-play img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.btn-circle {
padding: 0;
border-radius: 100% !important;
width: 4rem;
height: 4rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-circle.ripple::before, 
.btn-circle.ripple::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
background: #fff;
opacity: 0.8;
-webkit-animation: ripple-1 2s infinite ease-in-out;
animation: ripple-1 2s infinite ease-in-out;
z-index: -1;
}
.btn-circle.ripple::after {
opacity: 0.6;
-webkit-animation: ripple-2 2s infinite ease-in-out;
animation: ripple-2 2s infinite ease-in-out;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.btn-circle.ripple::after, 
.btn-circle.ripple::before {
background: var(--theme-color);
}
.lg-outer .lg-item:after {
position: absolute;
content: "";
top: 50%;
left: 50%;
width: 2.5rem;
height: 2.5rem;
margin-top: -1.25rem;
margin-left: -1.25rem;
background: none;
border: 4px solid var(--theme-color);
box-shadow: none;
border-radius: 50%;
-webkit-animation: loader-scale 1s ease-out infinite;
animation: loader-scale 1s ease-out infinite;
}
.lg-outer .lg-item.lg-complete:after {
display: none;
}
.lg-toolbar .lg-close {
background-color: rgba(255,255,255,0.8);
width: 40px;
height: 40px;
}
.lg-toolbar .lg-close:after {
content:'';
width: 100%;
height: 100%;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.lg-toolbar .lg-close:after {
background-image: url(../svg/close.svg);
}
@-webkit-keyframes ripple-1 {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes ripple-1 {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
@-webkit-keyframes ripple-2 {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.7);
opacity: 0;
}
}
@keyframes ripple-2 {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.7);
opacity: 0;
}
}
@-webkit-keyframes loader-scale {
0% {
transform: scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
@keyframes loader-scale {
0% {
transform: scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}