.w-videolist .vlist-wrapper {
  margin: -10px;
  flex-wrap: wrap;
}

 .w-videolist .vlist-wrapper > div {
  padding: 10px;
}

 .w-videolist .vlist-wrapper .vlist-main {
  font-size: 0;
  text-align: center;
}
 .w-videolist .w-videolist-title {
  margin-bottom: 50px;
  font-weight:500;
  font-size: 40px;
  color: #222222; 
}
 .w-videolist .vlist-wrapper .vlist-main .vlist-main-wrapper {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  border-radius: 0;
  overflow: hidden;
}

 .w-videolist .vlist-wrapper .vlist-main .vlist-main-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

 .w-videolist .vlist-wrapper .vlist-main .vlist-main-wrapper iframe,
 .w-videolist .vlist-wrapper .vlist-main .vlist-main-wrapper .vlist-cover {
  transition: 0.2s visibility linear, 0.2s opacity linear;
}

 .w-videolist .vlist-wrapper .vlist-main.active-player .vlist-main-wrapper iframe {
  visibility: visible;
  opacity: 1;
}

 .w-videolist .vlist-wrapper .vlist-main.active-player .vlist-main-wrapper .vlist-cover {
  visibility: hidden;
  opacity: 0;
}

 .w-videolist .vlist-wrapper .vlist-list {
  max-width: 423px;
}

 .w-videolist .vlist-wrapper .vlist-list .vlist-list-wrapper {
  margin: -10px 0;
}

 .w-videolist .vlist-wrapper .vlist-list .vlist-item {
  width: 100%;
  background-color: #fff;
  border-radius: 0;
  padding: 15px 10px;
  margin-bottom: 9px;
  cursor: pointer;
  transition: .15s box-shadow linear;
}

 .w-videolist .vlist-wrapper .vlist-list .vlist-item .vlist-item-cover {
  position: relative;
  width: 33.03333333%;
  max-width: 133px;
  border-radius: 0;
  overflow: hidden;
}

 .w-videolist .vlist-wrapper .vlist-list .vlist-item .vlist-item-cover .vlist-main-play-wrap::before {
  background-color: #333;
  opacity: .65;
}

 .w-videolist .vlist-wrapper .vlist-list .vlist-item .vlist-item-info {
  padding-left: 10px;
}

 .w-videolist .vlist-wrapper .vlist-list .vlist-item .vlist-item-info .vlist-item-date {
  margin-top: 10px;
  color: #888888;
}

 .w-videolist .vlist-wrapper .vlist-list .vlist-item:hover,  .w-videolist .vlist-wrapper .vlist-list .vlist-item.active {
  position: relative;
  box-shadow: 0px 9px 21px 0px rgba(36, 38, 42, 0.22);
}

@media all and (max-width: 990px) {
   .w-videolist .vlist-wrapper .vlist-list {
    max-width: none;
    width: 100%;
  }
   .w-videolist .vlist-wrapper .vlist-list .vlist-item {
    width: auto;
  }
}

 .w-videolist .vlist-wrapper .vlist-cover-wrap::before {
  content: '';
  display: block;
  padding-top: 56.25%;
}

 .w-videolist .vlist-wrapper .vlist-cover-wrap .vlist-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

 .w-videolist .vlist-wrapper .vlist-cover-wrap .vlist-cover .vlist-main-play-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

 .w-videolist .vlist-wrapper .vlist-cover-wrap .vlist-cover .vlist-main-play-wrap .vlist-main-play {
  width: 25%;
  height: 44.4444444444%;
  opacity: 0.8;
  filter: blur(14px);
  border-radius: 0;
  background-size: 395%;
  background-position: center;
  overflow: hidden;
}

 .w-videolist .vlist-wrapper .vlist-cover-wrap .vlist-cover .vlist-main-play-wrap .vlist-main-play,  .w-videolist .vlist-wrapper .vlist-cover-wrap .vlist-cover .vlist-main-play-wrap::before,  .w-videolist .vlist-wrapper .vlist-cover-wrap .vlist-cover .vlist-main-play-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  margin: auto 0;
  transform: translate3d(-50%, 0, 0);
}

 .w-videolist .vlist-wrapper .vlist-cover-wrap .vlist-cover .vlist-main-play-wrap::before {
  background-color: #333;
  width: 25%;
  height: 44.4444444444%;
  border-radius: 0;
  transform: translate3d(-50%, 0, 0) scale(0.94);
}

 .w-videolist .vlist-wrapper .vlist-cover-wrap .vlist-cover .vlist-main-play-wrap::after {
  width: 0;
  height: 0;
  margin-left: 1%;
  width: 10%;
  height: 12%;
  background-repeat: no-repeat;
  background-position: center top;
  transform: translate3d(-50%, 0, 0) rotateZ(90deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 110'%3E%3Cdesc%3EExample Triangle%3C/desc%3E%3C!-- A triangle --%3E%3Cpath d='M 10,110 L 70,0 L 130,110 z' fill='%23fff' stroke='%23ECDCC6' stroke-width='0'/%3E%3C/svg%3E");
}