// Skeleton Styles
.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 {
	position: relative;
	overflow: hidden;
	width: 100%;

	&: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);
	}

	&: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;
	}
}

.skeleton-body {
	.widget-2:first-of-type {
		padding-top: 0;
		margin-top: 0;
	}

	.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;
	}

	.skel-pro:before {
		padding-top: calc(100% + 180px);
		background-size: 100% 58%,
						55% 15px,
						85% 20px,
						55% 15px,
						40% 25px;
		background-position: 100% 0,
							100% calc(58% + 25px),
							100% calc(58% + 55px),
							100% calc(58% + 85px),
							100% calc(58% + 120px);
	}

	.skel-pro-search {
		padding: 1.5rem 0;
		border-bottom: 1px solid #ebebeb;

		&:before {
			padding-top: 60px;
			background-size: 60px 60px,60% 30%,30% 30%;
			background-position: 100% 0,calc(100% - 75px) 5px,calc(100% - 75px) 80%;
		}
		&:last-child {
			border-bottom: 0;
		}
	}

	.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 & .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;
	}

	.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;
	}

	.skel-post:before,
	.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);
	}

	.skel-cat:before,
	.skel-post-mask:before {
		padding-top: 100%; // issue: mask - 75%
		background-size: 100% 100%;
		background-position: 0 0;
	}
	
	// horizontal Layout
	.skel-pro-gallery:before {
		padding-top: 120%;
		background-size: 100% 75%, 23% 23%, 23% 23%, 23% 23%, 23% 23%;
		background-position: 100% 0, 100% 100%, 66% 100%, 33% 100%, 0 100%;
	}
	.mfp-offcanvas & .skel-pro-gallery:before {
		padding-top: 136%;
	}

	// grid layout
	.cols-sm-2 > .skel-pro-gallery {
		max-width: none;
		flex: 0 0 100%;

		&:before {
			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%;
		}
	}

	// masonry layout
	.product-masonry-type > .skel-pro-gallery {
		&:before {
			background-size: 100% calc(40% - 15px), calc(33.3333% - 10px) calc(15% - 15px), calc(66.6667% - 10px) calc(30% - 15px), calc(66.6667% - 10px) calc(30% - 15px), calc(33.3333% - 10px) calc(15% - 15px);
			padding-top: 250%;
			background-position: 100% 0, 100% 56%, 0 57%, 100% 100%, 0 91%;
		}
	}

	// sticky-info layout
	.sticky-info .skel-pro-gallery:before {
		background-size: 100% 100%;
		background-position: 0 0;
	}

	// gallery carousel layout
	& .pg-gallery .skel-pro-gallery:before {
		padding-top: 0;
		min-height: 400px;
		background-size: 32% 100%, 32% 100%, 32% 100%;
		background-position: 100% 0, 50% 0, 0 0;

		.sidebar-fixed ~ .main-content &{
			background-size: 49% 100%, 49% 100%;
			background-position: 0 0, 100% 0;
			padding-top: 55%;
		}
	}
	// sticky both layout
	&.sticky-both .skel-pro-gallery:before {
		padding-top: 0;
		min-height: 1200px;
		background-size: 100% 50%,100% 50%;
		background-position: 100% 0, 100% calc(100% + 20px);
	}
}

@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) {
	// gallery carousel layout
	.skeleton-body .pg-gallery .skel-pro-gallery:before {
		background-size: 48% 100%, 48% 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 {
		margin-bottom: 2.5rem;
		&:before {
			padding-top: 0;
			min-height: 320px;
			background-size: 44% 100%, 20% 20px, 30% 35px, 10% 20px, 53% 100px, 10% 20px;
			background-position: 100% 0, 
								41.25% 30px,
								32.86% 70px,
								47.78% 110px,
								0 150px,
								47.78% 270px;
		}
	}
}

@media (max-width:575px) {
	// gallery carousel layout
	.skeleton-body .pg-gallery .skel-pro-gallery:before {
		background-size: 100% 100%;
		background-position: 0 0;
	}
	// Grid Layout
	.skeleton-body .cols-sm-2>.skel-pro-gallery:before {
		padding-top: calc(200% + 20px);
		background-size: 100% 50%,100% 50%;
		background-position: 0 0, 0 calc(100% + 20px);
	}
}

@media (min-width: 576px) {
	.skeleton-body .skel-pro-list:before {
		padding-top: 25%;
		background-size: 26rem 100%,
						20% 15px,
						50% 20px,
						25% 20px,
						35% 15px,
						calc(100% - 28rem) 70px,
						123px 40px;
		background-position: 100% 0,
							calc(100% - 28rem) calc(50% - 117px),
							calc(100% - 28rem) calc(50% - 90px),
							calc(100% - 28rem) calc(50% - 55px),
							calc(100% - 28rem) calc(50% - 28px),
							calc(100% - 28rem) calc(50% + 26px),
							calc(100% - 28rem) 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: 100%;
		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) {
	// vertical layout for desktop
	.skeleton-body .pg-vertical > .skel-pro-gallery:before {
		padding-top: 100%;
		background-size: calc(100% - 119px) 100%, 109px 23.8%, 109px 23.8%, 109px 23.8%, 109px 23.8%;
		background-position: calc(100% - 119px) 0, 100% 0, 100% 33%, 100% 66%, 100% 100%;
	}
	// gallery-type
	.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, // left side
		30% 30px, 40% 30px, 40% 30px, 49.6% 1px, 40% 45px, 49.6% 1px, 30% 30px; //right side
		background-position: 100% 0, 100% 40px, 100% 65px, 100% 100px, 100% 125px, 100% 150px, 100% 175px, // left side
		28% 0, 16% 50px, 16% 100px, 0 150px, 16% 170px, 0 235px, 28% 255px; // right side
	}
	// sticky both
	.skeleton-body.sticky-both>:not(.col-md-6) .skel-pro-summary:before {
		min-height: 1200px;
		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;
	}
}

.skel-menu::before {
	height: calc(100% - 30px);
	margin: 15px 0;
	background-size: 50% 20px, 60% 20px, 40% 20px, 50% 20px, 70% 20px, 60% 20px, 65% 20px;
	background-position: calc(100% - 30px) 0, calc(100% - 30px) 16%, calc(100% - 30px) 33%, calc(100% - 30px) 50%, calc(100% - 30px) 66%, calc(100% - 30px) 83%, calc(100% - 30px) 100%;
}

.skel-megamenu::before {
	height: calc(100% - 30px);
	width: calc(100% - 40px);
	margin: 15px 20px;
	background-size: 28% 20px, 23% 20px, 25% 20px, 20% 20px, 30% 20px, 25% 20px, 26% 20px, 28% 20px, 20% 20px,
					28% 20px, 23% 20px, 25% 20px, 20% 20px, 30% 20px, 25% 20px, 26% 20px, 28% 20px, 20% 20px,
					30% 100%;
	background-position: 100% 0, 100% 12.5%, 100% 25%, 100% 37.5%, 100% 50%, 100% 62.5%, 100% 75%, 100% 87.5%, 100% 100%,
						51.39% 0, 54.55% 12.5%, 53.34% 25%, 56.25% 37.5%, 50% 50%, 53.34% 62.5%, 52.7% 75%, 51.39% 87.5%, 56.25% 100%,
						0 0;
}