.clips-wrap-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 960px;
  margin: 40px auto 50px; }

.clips-item {
  width: 25%;
  position: relative;
  z-index: 20; }

.clips-item-in {
  margin: 10px;
  padding: 10px;
  background: #fff;
  box-shadow: 0px 15px 25px -10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  min-height: calc(100% - 20px);
  box-sizing: border-box; }
  .clips-item-in .clips-item-top {
    font-size: 0;
    position: relative;
    margin: 0 0 10px;
    height: 112px; }
    @media (max-width: 768px) {
  .clips-item-in .clips-item-top {
    height: 180px; } }
  .clips-item-in .clips-item-video {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none; }
    .clips-item-in .clips-item-video iframe {
      width: 100%;
      height: 100%;
      border: 0; }
    .clips-item-in .clips-item-video:before {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      display: block;
      content: ''; }
  .clips-item-in .clips-item-image {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1; }
    .clips-item-in .clips-item-image.not-visible {
      opacity: 0;
      visibility: hidden; }
  .clips-item-in .clips-item-text-wrap {
    color: #323232; }
    .clips-item-in .clips-item-text-wrap .clips-item-title {
      font-size: 15px;
      font-weight: 600;
      margin: 0 0 5px;
      font-family: 'Roboto Slab', Georgia, serif; }
    .clips-item-in .clips-item-text-wrap .clips-item-text {
      font-family: 'Roboto Slab', Georgia, serif;
      font-size: 13px;
      color: #777;
      word-break: break-word; }
      .clips-item-in .clips-item-text-wrap .clips-item-text p {
        margin: 0; }

.clips-popup-wrap {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999999;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px; }
  .clips-popup-wrap.opened {
    opacity: 1;
    visibility: visible; }

.clips-popup-wrap-in {
  width: 100%;
  display: flex;
  flex-direction: column;
  max-width: 1270px;
  margin: auto;
  background: #fff;
  position: relative;
  padding: 40px;
  box-sizing: border-box; }
  @media (max-width: 768px) {
  .clips-popup-wrap-in {
    padding: 30px; } }

.clips-popup-left {
  flex: 1 0 0;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px; }
  .clips-popup-left .thumb-wrap {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 56%; }
    .clips-popup-left .thumb-wrap iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

.clips-popup-right .clips-item-title {
  font-size: 18px;
  margin-bottom: 15px;
  font-family: 'Roboto Slab', Georgia, serif;
  color: #000; }
  .clips-popup-right .clips-item-text {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 15px;
    color: #777; }

.clips-popup-close {
  position: absolute;
  right: 10px;
  top: 10px;
  background: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22full%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aev%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2Fxml-events%22%20xml%3Aspace%3D%22preserve%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2216px%22%20height%3D%2216px%22%20%20viewBox%3D%220%200%2016%2016%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M15.985%2C14.571%20L14.571%2C15.985%20L8.000%2C9.414%20L1.429%2C15.985%20L0.015%2C14.571%20L6.586%2C8.000%20L0.015%2C1.429%20L1.429%2C0.015%20L8.000%2C6.586%20L14.571%2C0.015%20L15.985%2C1.429%20L9.414%2C8.000%20L15.985%2C14.571%20Z%22%2F%3E%3C%2Fsvg%3E) center center/15px no-repeat;
  width: 15px;
  height: 15px;
  z-index: 10;
  cursor: pointer;
  filter: brightness(0); }

@media (max-width: 1023px) {
  .clips-popup-wrap-in {
    flex-direction: column; }

  .clips-popup-left {
    flex: inherit; } }

@media (max-width: 991px) {
  .clips-item {
    width: 50%; } }

@media (max-width: 800px) {
  .clips-item-in {
    padding: 20px; } }

@media (max-width: 550px) {
  .clips-item {
    width: 100%; }

  .clips-item-text-wrap {
    text-align: center; }

  .clips-item-text-wrap .clips-item-title {
    margin-bottom: 15px; } }

[id ^= sandbox_theme_panel] {
  color: #000;
  width: 100px !important;
  font-size: 10px !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important; }