.skeleton-body .widget-2,
.skeleton-body .skel-pro,
.skeleton-body .skel-pro-list,
.skeleton-body .skel-pro-search,
.skeleton-body .skel-pro-gallery,
.skeleton-body .skel-pro-summary,
.skeleton-body .skel-pro-tabs,
.skeleton-body .skel-post,
.skeleton-body .skel-post-list,
.skeleton-body .skel-post-mask,
.skeleton-body .skel-cat,
.skel-menu,
.skel-megamenu > li {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.skeleton-body .widget-2:before,
.skeleton-body .skel-pro:before,
.skeleton-body .skel-pro-list:before,
.skeleton-body .skel-pro-search:before,
.skeleton-body .skel-pro-gallery:before,
.skeleton-body .skel-pro-summary:before,
.skeleton-body .skel-pro-tabs:before,
.skeleton-body .skel-post:before,
.skeleton-body .skel-post-list:before,
.skeleton-body .skel-post-mask:before,
.skeleton-body .skel-cat:before,
.skel-menu:before,
.skel-megamenu > li:before {
  content: "";
  display: block;
  width: 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0), linear-gradient(#f4f4f4 100%, transparent 0);
}
.skeleton-body .widget-2:after,
.skeleton-body .skel-pro:after,
.skeleton-body .skel-pro-list:after,
.skeleton-body .skel-pro-search:after,
.skeleton-body .skel-pro-gallery:after,
.skeleton-body .skel-pro-summary:after,
.skeleton-body .skel-pro-tabs:after,
.skeleton-body .skel-post:after,
.skeleton-body .skel-post-list:after,
.skeleton-body .skel-post-mask:after,
.skeleton-body .skel-cat:after,
.skel-menu:after,
.skel-megamenu > li:after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 80%);
  animation: skeletonloading 1.5s infinite;
}

.dark-style .skeleton-body .skel-pro-search2:before {
  background-image: linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0), linear-gradient(#222 100%, transparent 0);
}
.dark-style .skeleton-body .skel-pro-search2:after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 20%, #333 50%, rgba(0, 0, 0, 0) 80%);
  animation: skeletonloading 1.5s infinite;
}

.skeleton-body .widget-2:first-of-type {
  padding-top: 0;
  margin-top: 0;
}
.skeleton-body .widget-2:before {
  height: 630px;
  background-size: 100% 30px, 70% 20px, 50% 20px, 80% 20px, 40% 20px, 30% 20px, 50% 20px, 100% 30px, 70% 20px, 50% 20px, 80% 20px, 40% 20px, 30% 20px, 50% 20px;
  background-position: 100% 10px, 100% 65px, 100% 105px, 100% 145px, 100% 185px, 100% 225px, 100% 265px, 100% 325px, 100% 380px, 100% 420px, 100% 460px, 100% 500px, 100% 540px, 100% 580px;
}
.skeleton-body .skel-pro:before {
  padding-top: calc(var(--rio-skel-pro-ratio-pcnt) + 119px);
  background-size: 100% calc(100% - 119px), 55% 12px, 85% 18px, 55% 20px, 40% 15px;
  background-position: 100% 0, 100% calc((100% - 119px) + 22px), 100% calc((100% - 119px) + 48px), 100% calc((100% - 119px) + 75px), 100% calc((100% - 119px) + 100px);
}
.skeleton-body .skel-pro-search {
  padding: 1.5rem 0;
  border-bottom: 1px solid #ebebeb;
}
.skeleton-body .skel-pro-search:before {
  padding-top: 60px;
  background-size: 60px 60px, 60% 30%, 30% 30%;
  background-position: 100% 0, calc(100% - 75px) 5px, calc(100% - 75px) 80%;
}
.skeleton-body .skel-pro-search:last-child {
  border-bottom: 0;
}
.skeleton-body .skel-pro-search2:before {
  padding-top: calc(var(--rio-skel-pro-ratio-pcnt) + 85px);
  background-size: 100% calc(100% - 85px), 84% 18px, 55% 20px;
  background-position: 100% 0, 100% calc((100% - 85px) + 30px), 100% calc((100% - 85px) + 60px);
}
.skeleton-body .skel-pro-summary:before {
  min-height: 500px;
  background-size: 55% 25px, 20% 25px, 70% 30px, 40% 18px, 30% 30px, 40% 15px, 100% 14px, 100% 14px, 100% 14px, 40% 14px, 66% 30px, 70% 30px, 100% 1px, 70% 45px, 100% 1px, 50% 30px;
  background-position: 100% 0, 0 0, 100% 34px, 100% 75px, 100% 115px, 100% 155px, 100% 190px, 100% 215px, 100% 240px, 100% 265px, 100% 310px, 100% 350px, 100% 400px, 100% 420px, 100% 485px, 100% 506px;
}
.mfp-product .skeleton-body .skel-pro-gallery:before {
  background-size: 100% 100%;
  background-position: 0 0;
}
.mfp-product .skeleton-body .skel-pro-summary:before {
  background-size: 55% 25px, 70% 30px, 40% 18px, 30% 30px, 40% 15px, 100% 14px, 100% 14px, 100% 14px, 40% 14px, 100% 1px, 70% 45px, 100% 1px, 50% 30px;
  background-position: 100% 0, 100% 34px, 100% 75px, 100% 115px, 100% 155px, 100% 190px, 100% 215px, 100% 240px, 100% 265px, 100% 300px, 100% 320px, 100% 385px, 100% 406px;
  min-height: 435px;
}
.skeleton-body .skel-pro-tabs:before {
  min-height: 200px;
  background-size: 120px 25px, 200px 25px, 100px 25px, 100% 1px, 100% 15px, 100% 15px, 100% 15px, 80% 15px;
  background-position: 100% 0, calc(100% - 140px) 0, calc(100% - 360px) 0, 100% 35px, 100% 55px, 100% 85px, 100% 115px, 100% 145px;
}
.skeleton-body .skel-post:before,
.skeleton-body .skel-post-list:before {
  padding-top: calc(56.25% + 258px);
  background-size: 100% calc(100% - 258px), 40% 20px, 60% 35px, 20% 20px, 100% 70px, 20% 20px;
  background-position: 100% 0, 100% calc(100% - 228px), 100% calc(100% - 178px), 100% calc(100% - 148px), 100% calc(100% - 68px), 100% calc(100% - 38px);
}
.skeleton-body .skel-cat:before,
.skeleton-body .skel-post-mask:before {
  padding-top: 100%;
  background-size: 100% 100%;
  background-position: 0 0;
}
.skeleton-body .skel-pro-gallery:before {
  padding-top: 141%;
  background-size: 100% 80%, 23.5% 18.5%, 23% 18.5%, 23% 18.5%, 23% 18.5%;
  background-position: 100% 0, 100% 100%, 66% 100%, 33% 100%, 0 100%;
}
.mfp-product .skeleton-body .skel-pro-gallery:before {
  padding-top: 112.5%;
}
.skeleton-body .cols-sm-2 > .skel-pro-gallery {
  max-width: none;
  flex: 0 0 100%;
}
.skeleton-body .cols-sm-2 > .skel-pro-gallery:before {
  padding-top: 112.5%;
  background-size: calc(50% - 10px) calc(50% - 10px), calc(50% - 10px) calc(50% - 10px), calc(50% - 10px) calc(50% - 10px), calc(50% - 10px) calc(50% - 10px);
  background-position: 100% 0, 0 0, 100% 100%, 0 100%;
}
.skeleton-body .product-masonry-type > .skel-pro-gallery:before {
  background-size: 100% calc(42.75% - 15px), calc(33.3333% - 15px) calc(13.6% - 15px), calc(66.6667% - 10px) calc(30% - 15px), calc(66.6667% - 10px) calc(30% - 15px), calc(33.3333% - 10px) calc(15% - 15px);
  padding-top: calc(262.5% + 40px);
  background-position: 100% 0, 100% 57.8%, 0 60.5%, 99.5% 103%, 0 90.2%;
}
.skeleton-body.sticky-info .skel-pro-gallery:before {
  padding-top: calc( 450% + 60px );
  background-size: 100% calc(25% - 15px), 100% calc(25% - 15px), 100% calc(25% - 15px), 100% calc(25% - 15px);
  background-position: 100% 0, 100% 33.333%, 0 66.667%, 0 100%;
}
.skeleton-body .pg-gallery .skel-pro-gallery:before {
  padding-top: calc((100% - 40px) * 9 / 24);
  background-size: 32% 100%, 32% 100%, 32% 100%;
  background-position: 100% 0, 50% 0, 0 0;
}
.skeleton-body.sticky-both .skel-pro-gallery:before {
  padding-top: calc( 450% + 60px );
  background-size: 100% calc(25% - 15px), 100% calc(25% - 15px), 100% calc(25% - 15px), 100% calc(25% - 15px);
  background-position: 100% 0, 100% 33.333%, 0 66.667%, 0 100%;
}

@keyframes skeletonloading {
  from {
    transform: skewX(45deg) translateX(80%);
  }
  to {
    transform: skewX(45deg) translateX(-80%);
  }
}
.mfp-container .mfp-content .quickView-content .skel-pro-single {
  margin-bottom: -2rem;
}

.post-mask.skeleton-body:before {
  content: none;
}

@media (max-width: 767px) {
  .skeleton-body .pg-gallery .skel-pro-gallery:before {
    padding-top: calc((100% - 20px) * 9 / 16);
    background-size: calc(50% - 10px) 100%, calc(50% - 10px) 100%;
    background-position: 100% 0, 0 0;
  }

  .skeleton-body .skel-pro-gallery {
    margin-bottom: 2rem;
  }

  .mfp-product > :not(.mfp-s-error) > .mfp-preloader {
    position: relative;
    top: -100%;
    transform: none;
    width: 100%;
    left: 0;
  }
}
@media (min-width: 767px) {
  .skeleton-body .skel-post-list:before {
    padding-top: 0;
    min-height: 250px;
    background-size: 41% 100%, 20% 15px, 40% 25px, 56.2% 75px, 10% 22px;
    background-position: 0 0, 45.25% 40px, 27% 65px, 0 105px, 51.4% 195px;
  }
}
@media (max-width: 575px) {
  .skeleton-body .pg-gallery .skel-pro-gallery:before {
    padding-top: calc(100% * 9 / 8);
    background-size: 100% 100%;
    background-position: 0 0;
  }

  .skeleton-body .cols-sm-2 > .skel-pro-gallery:before {
    padding-top: calc( 450% + 60px );
    background-size: 100% calc(25% - 15px), 100% calc(25% - 15px), 100% calc(25% - 15px), 100% calc(25% - 15px);
    background-position: 100% 0, 100% 33.333%, 0 66.667%, 0 100%;
  }
}
@media (min-width: 576px) {
  .skeleton-body .skel-pro-list:before {
    padding-top: calc(max(25%, calc(var(--rio-skel-pro-ratio) * 280px)));
    background-size: 28rem calc(var(--rio-skel-pro-ratio) * 280px), 20% 10px, 50% 18px, 25% 20px, 25% 12px, calc(100% - 28rem) 50px, 123px 50px;
    background-position: 100% 0, calc(100% - 30rem) calc(50% - 95px), calc(100% - 30rem) calc(50% - 73px), calc(100% - 30rem) calc(50% - 46px), calc(100% - 30rem) calc(50% - 21px), calc(100% - 30rem) calc(50% + 20px), calc(100% - 30rem) calc(50% + 95px);
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .skeleton-body.sticky-both > :not(.col-md-6) .skel-pro-gallery::before {
    padding-top: 112.5%;
    min-height: 0;
    background-size: calc(50% - 10px) calc(50% - 10px), calc(50% - 10px) calc(50% - 10px), calc(50% - 10px) calc(50% - 10px), calc(50% - 10px) calc(50% - 10px);
    background-position: 100% 0, 0 0, 100% 100%, 0 100%;
  }
}
@media (min-width: 992px) {
  .skeleton-body .pg-vertical > .skel-pro-gallery:before {
    padding-top: calc((100% - 119px) * 9 / 8);
    background-size: calc(100% - 119px) 100%, 109px 23%, 109px 23%, 109px 23%, 109px 23%;
    background-position: calc(100% - 119px) 0, 100% 0, 100% 33%, 100% 66%, 100% 100%;
  }

  .skeleton-body.product-single > :not(.col-md-6) .skel-pro-summary:before {
    min-height: 285px;
    background-size: 30% 30px, 25% 18px, 20% 15px, 48% 14px, 48% 14px, 48% 14px, 20% 14px, 30% 30px, 40% 30px, 40% 30px, 49.6% 1px, 40% 45px, 49.6% 1px, 30% 30px;
    background-position: 100% 0, 100% 40px, 100% 65px, 100% 100px, 100% 125px, 100% 150px, 100% 175px, 28% 0, 16% 50px, 16% 100px, 0 150px, 16% 170px, 0 235px, 28% 255px;
  }

  .skeleton-body.sticky-both > :not(.col-md-6) .skel-pro-summary:before {
    padding-top: calc( 225% + 60px );
    background-size: 20% 30px, 24% 30px, 15% 18px, 19% 15px, 22% 36px, 24% 16px, 24% 14px, 24% 14px, 15% 14px, 24% 36px, 24% 36px, 24% 1px, 15% 45px, 24% 45px, 24% 1px, 24% 30px;
    background-position: 100% 0, 100% 40px, 100% 80px, 100% 105px, 100% 140px, 100% 195px, 100% 220px, 100% 245px, 100% 270px, 0 0, 0 50px, 0 100px, 10.6% 120px, 0 185px, 0 250px, 0 270px;
  }

  .skeleton-body.sticky-both .woocommerce-product-gallery {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (min-width: 768px) {
  .mfp-product .skeleton-body .skel-pro-summary {
    padding-left: 1rem;
  }
}
.skel-menu::before,
.skel-megamenu > li::before {
  height: calc(100% - 30px);
  margin: 15px 0;
  background-size: 60% 20px, 70% 20px, 50% 20px, 60% 20px, 80% 20px, 70% 20px, 75% 20px;
  background-position: calc(100% - 20px) 0px, calc(100% - 20px) 16%, calc(100% - 20px) 33%, calc(100% - 20px) 50%, calc(100% - 20px) 66%, calc(100% - 20px) 83%, calc(100% - 20px) 100%;
}