.component-video {
  width:100%;
  position:relative;
  padding-bottom:56.5%
}

.component-video .custom-video,.component-video embed,.component-video iframe,.component-video object {
  display:block;
  width:100%;
  height:100%
}

.component-video .video-wrapper {
  position:absolute;
  left:0;
  top:0;
  z-index:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background-color:#000
}

.component-video[data-loop="1"] .video-wrapper {
  background-color:transparent
}

.component-video[data-loop="1"] .video-overlay {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0
}

.component-video .custom-video {
  -o-object-fit:contain;
  object-fit:contain
}

.component-video .video-preview {
  display:none;
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:1;
  visibility:visible;
  background-color:#000;
  transition:opacity .3s cubic-bezier(.21,.67,.58,1),visibility .3s cubic-bezier(.21,.67,.58,1)
}

.component-video .video-preview .component-image {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  padding-bottom:0!important;
  z-index:0
}

.component-video .video-preview .play-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:96px;
  height:96px;
  color:#fff;
  z-index:1
}

.component-video .video-preview .play-btn:before {
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  box-sizing:border-box;
  left:0;
  top:0;
  border-radius:100%;
  background:rgba(27,27,28,.2);
  border:2px solid #fff;
  transform:scale(.91);
  transition:all .3s cubic-bezier(.21,.67,.58,1)
}

.component-video .video-preview .preloader {
  display:none;
  width:28px;
  height:28px
}

.component-video .video-preview .preloader .icon {
  display:block;
  position:absolute;
  width:28px;
  height:28px;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto
}

.component-video .video-preview .preloader .icon .circular-loader {
  fill:none;
  stroke:currentColor;
  stroke-width:6px;
  transform-origin:center center
}

.component-video .video-preview .preloader .icon .circular-loader .loader-path {
  stroke-dasharray:150,200;
  stroke-dashoffset:-10;
  stroke-linecap:round;
  animation:circular-loader 1.5s ease-in-out infinite reverse;
  stroke-width:3
}

.component-video .video-preview .play-icon {
  position:absolute;
  width:28px;
  height:30px;
  margin-top:-15px;
  margin-left:-11px;
  left:50%;
  top:50%
}

.component-video .video-preview.preloading .play-icon {
  display:none
}

.component-video .video-preview.preloading .preloader {
  display:block
}

.component-video.overlayed {
  cursor:pointer
}

.component-video.overlayed .video-preview {
  display:block
}

.is-pointer .component-video.overlayed:hover {
  cursor:pointer
}

.is-pointer .component-video.overlayed:hover .video-preview:not(.preloading) .play-btn:before {
  transform:scale(1)
}