/**
 *
 * phpBB Studio - Advanced Shop System. An extension for the phpBB Forum Software package.
 *
 * @copyright (c) 2019, phpBB Studio, https://www.phpbbstudio.com
 * @license GNU General Public License, version 2 (GPL-2.0)
 *
 */
.icon-aps-blue { color: #12a3eb; }
.icon-aqua { color: #18a39b; }
.icon-yellow { color: #f8b739; }
.icon-pink { color: #ed2861; }
.icon-violet { color: #c12680; }
.icon-purple { color: #5d3191; }
.icon-gold { color: #d6af36; }
.icon-silver { color: #a7a7ad; }
.icon-bronze { color: #824a02; }
.icon-white { color: #ffffff; }
.icon-lighten { color: rgba(255, 255, 255, 0.75); }
.icon-darken { color: rgba(0, 0, 0, 0.5); }

.shop-padding { padding: 8px 10px; }
.shop-pad-half { padding: 0 0.375rem; }
.shop-no-pad { padding: 0 !important; }
.shop-no-pad-top { padding-top: 0 !important; }
.shop-no-pad-left { padding-left: 0 !important; }
.shop-no-pad-right { padding-right: 0 !important; }
.shop-no-pad-bot { padding-bottom: 0 !important; }
.shop-mar-bot { margin-bottom: 16px; }

.shop-block { display: block !important; }
.shop-inline { display: inline-block !important; }
.shop-relative { position: relative; }

.shop-cursor-ban { cursor: not-allowed; }
.shop-cursor-normal { cursor: auto; }
.shop-cursor-pointer { cursor: pointer; }

.shop-bold { font-weight: bold; }
.shop-text-small { font-size: 13px; }
.shop-text-med { font-size: 16px; }
.shop-text-large { font-size: 20px; }
.shop-text-left { text-align: left; }
.shop-text-right { text-align: right; }

.shop-text-indent-3 { text-indent: 3px; }
.shop-text-indent-10 { text-indent: 10px; }

.shop-text-blue { color: #12a3eb; }
.shop-text-black { color: #000000; }
.shop-text-darkgray { color: #313131; }
.shop-text-lightgray { color: #999999; }
.shop-darken-span span { color: #313131; }

.shop-text-ellipsis {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.shop-overflow {
	overflow-x: visible !important;
	overflow-y: visible !important;
}

.shop-fake-min-width {
	min-width: 0;
}

.shop-fake-width {
	width: 1px;
	max-width: 100%;
}

@media all and (min-width: 601px) {
	.shop-fake-width.m6 {
		max-width: 50%;
	}
}

.shop-dropdown { left: calc(50% - 24px); }
.shop-category-dropdown { z-index: 11; }
.shop-category-dropdown fieldset { max-width: 450px; }
.shop-category-dropdown .pointer { left: 5%; }

@media all and (min-width: 1024px) {
	.shop-category-dropdown .pointer { left: 67px; }
}

@media all and (min-width: 800px) {
	.shop-category-dropdown .dropdown-contents { max-height: 400px; }
}

.shop-category-dropdown .dropdown-contents::-webkit-scrollbar {
	background: rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	width: 6px;
	height: 6px;
	-webkit-appearance: none;
}

.shop-category-dropdown .dropdown-contents::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.25);
	border-radius: 4px;
}

.shop-vertical {
	display: flex !important;
	align-items: center;
	height: 100%;
}

.shop-vertical > * {
	flex: 1 0 100%;
}

.aps-bool { display: none; }

.aps-bool:checked + .aps-button-red,
.aps-bool:checked + .aps-button-blue,
.aps-bool:checked + .aps-button-green { color: #ffffff; }
.aps-bool:checked + .aps-button-red { background: #d31141; }
.aps-bool:checked + .aps-button-blue { background: #12a3eb; }
.aps-bool:checked + .aps-button-green { background: #28a745; }

.aps-nav .aps-list-active {
	border-bottom: 2px solid #0076b1;
}

.shop-panel-header-link {
	text-decoration: none !important;
	letter-spacing: 0.1em;
	color: #313131;
}

.shop-panel-bottom .shop-panel-header-link {
	color: #f9f9f9;
}

.shop-panel-header-link:before {
	color: #12a3eb;
	opacity: 0;
	position: absolute;
	content: attr(data-item-title);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	pointer-events: none;
}

.shop-panel-header-link:hover:before,
.shop-panel-header-link:focus:before {
	opacity: 1;
	-webkit-transform: scale(1) translateX(0) translateY(0) rotate(0deg);
	-moz-transform: scale(1) translateX(0) translateY(0) rotate(0deg);
	transform: scale(1) translateX(0) translateY(0) rotate(0deg);
}

.shop-carousel-footer {
	min-height: 43px;
}

.shop-carousel-images {
	max-width: 100%;
	max-height: 480px;
	margin: 0 auto;
}

.shop-carousel-nav-img {
	margin: 0 25px;
}

@media all and (max-width: 800px) {
	.shop-carousel-nav-img {
		margin: 0 4px;
	}
}

.shop-panel-footer-button {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	height: 35px;
	margin: -8px 0 -8px -10px;
}

.shop-panel-background {
	background-repeat: no-repeat;
	background-size: cover;
}

.shop-panel-bottom {
	background: rgba(49, 49, 49, 0.75);
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	padding: 12px 16px 8px;
}

.shop-panel-icon {
	text-align: center;
	position: absolute;
	z-index: 10;
	top: 0;
	right: 16px;
	width: 36px;
}

.shop-panel-icon:before {
	font-size: 20px;
	line-height: 30px;
	position: relative;
	z-index: 1;
}

.shop-panel-icon-small:before {
	font-size: 16px;
	line-height: 22px;
}

.shop-panel-icon-tiny:before {
	font-size: 13px;
	line-height: 18px;
}

.shop-panel-icon:after {
	font-family: FontAwesome, sans-serif;
	font-size: 48px;
	text-shadow: -2px 1px 4px rgba(0, 0, 0, 0.4);
	color: #12a3eb;
	position: absolute;
	top: -4px;
	left: 0;
	content: "\f02e";
}

.shop-panel-icon-small:after,
.shop-panel-icon-tiny:after {
	text-shadow: -1px 1px 3px rgba(0, 0, 0, 0.4);
}

.shop-panel-icon-small { width: 30px; }
.shop-panel-icon-tiny { width: 25px; }

.shop-panel-icon-small:after { font-size: 40px; }
.shop-panel-icon-tiny:after { font-size: 32px; }

.shop-panel-icon-red:after { color: #d31141; }
.shop-panel-icon-green:after { color: #28a745; }
.shop-panel-icon-orange:after { color: #f06045; }
.shop-panel-icon-aqua:after { color: #18a39b; }
.shop-panel-icon-yellow:after { color: #f8b739; }
.shop-panel-icon-pink:after { color: #ed2861; }
.shop-panel-icon-violet:after { color: #c12680; }
.shop-panel-icon-purple:after { color: #5d3191; }
.shop-panel-icon-gold:after { color: #d6af36; }
.shop-panel-icon-silver:after { color: #a7a7ad; }
.shop-panel-icon-bronze:after { color: #824a02; }

.shop-inventory-stack {
	position: relative;
	z-index: 1;
	margin-left: -2px;
}

.shop-sale-tag {
	position: absolute;
	top: 0;
	left: 0;
}

.shop-sale-tag .fa-thumb-tack {
	font-size: 24px;
	background: -webkit-linear-gradient(#d31141 18px, #7b7e8a 18px);
	-webkit-background-clip: text;
	color: #d31141;
	position: absolute;
	z-index: 1;
	top: 5px;
	left: 15px;
	transform: rotate(30deg);
	-webkit-text-fill-color: transparent;
}

.shop-sale-tag .fa-tag {
	font-size: 64px;
	text-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
	color: rgba(248, 183, 57, 0.75);
	position: absolute;
	top: 10px;
	left: 0;
}

.shop-sale-tag span {
	font-size: 13px;
	font-weight: bold;
	color: #ffffff;
	position: absolute;
	z-index: 2;
	top: 34px;
	left: 24px;
	display: inline-block;
	transform: rotate(43deg);
}

.shop-title {
	background: #fefefe;
	border: 1px solid #12a3eb;
	border-radius: 4px;
	color: #12a3eb;
	padding: 8px 16px;
}

.shop-button-disabled {
	background: #fefefe;
	border-color: #999999;
	color: #999999;
	opacity: 1;
}

.shop-button-disabled:hover {
	background: #f9f9f9;
	color: #666666;
	cursor: not-allowed;
}

.shop-button-active:focus {
	outline: none;
}

.aps-button-blue.shop-button-active {
	background: #12a3eb;
	color: #ffffff;
}

.aps-button-green.shop-button-active {
	background: #28a745;
	color: #ffffff;
}

.aps-button-red.shop-button-active {
	background: #d31141;
	color: #ffffff;
}

.aps-button-alert {
	margin: 0 8px;
	padding-right: 32px;
	padding-left: 32px;
}

.shop-pagination {
	display: flex;
	margin: 0;
	list-style: none;
	user-select: none;
	flex-flow: row nowrap;
}

.shop-pagination > li {
	font-weight: bold;
	flex: 1 1 0;
}

.shop-pagination > li:not(:first-child) .aps-button-blue {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.shop-pagination > li:not(:last-child) .aps-button-blue {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.shop-pagination > li:first-child .aps-button-blue i,
.shop-pagination > li:last-child .aps-button-blue i,
.shop-pagination > li .shop-button-disabled i {
	transition: transform ease-in-out 0.25s, opacity ease-in-out 0.25s;
}

.shop-pagination > li:first-child .aps-button-blue:hover i {
	transform: translateX(-16px);
}

.shop-pagination > li:last-child .aps-button-blue:hover i {
	transform: translateX(16px);
}

.shop-pagination > li .shop-button-disabled:hover i {
	opacity: 0;
}

.shop-pagination-text {
	color: #888888;
	padding: 7px;
}

/* Carousel */
.nojs [data-shop-carousel="true"] > *:not(:first-child) {
	display: none;
}

.shop-carousel-dots {
	text-align: center;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-carousel-dots li {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0 5px;
	padding: 0;
	cursor: pointer;
}

.shop-carousel-dots li button {
	font-size: 0;
	line-height: 0;
	background: transparent;
	border: 0;
	outline: none;
	color: transparent;
	display: block;
	width: 24px;
	height: 24px;
	padding: 5px;
	cursor: pointer;
}

.shop-carousel-dots li button:hover,
.shop-carousel-dots li button:focus {
	outline: none;
}

.shop-carousel-dots li button:hover:before {
	opacity: 1;
}

.shop-carousel-dots li button:before {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 20px;
	text-align: center;
	color: #000000;
	opacity: 0.25;
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	content: "•";
}

.shop-carousel-dots .slick-active button:before {
	color: #12a3eb;
	opacity: 0.75;
}

.aps-button-blue.shop-carousel-next,
.aps-button-blue.shop-carousel-prev {
	text-align: center;
	border-color: transparent;
	border-radius: 0;
	box-shadow: none;
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	height: auto;
}

.aps-button-blue.shop-carousel-prev {
	border-bottom-left-radius: inherit;
	left: 0;
}

.aps-button-blue.shop-carousel-next {
	border-bottom-right-radius: inherit;
	right: 0;
}

.aps-button-blue.shop-carousel-next:focus,
.aps-button-blue.shop-carousel-prev:focus {
	outline: none;
}

.shop-carousel-next i:before,
.shop-carousel-prev i:after {
	padding: 0 0 0 2px;
}

/* Panel heights */
@media only screen and (max-width: 600px) {
	.aps-body {
		margin: 0;
		padding: 0;
	}

	.aps-col {
		padding: 0;
	}
}

.aps-col.s3 .shop-panel-height { height: calc(((100vw / 4) - 10px) / 3 * 2); }
.aps-col.s4 .shop-panel-height { height: calc(((100vw / 3) - 10px) / 3 * 2); }
.aps-col.s6 .shop-panel-height { height: calc(((100vw / 2) - 10px) / 3 * 2); }
.aps-col.s12 .shop-panel-height { height: calc((100vw - 10px) / 3 * 2); }

@media only screen and (min-width: 601px) {
	.aps-col.m3 .shop-panel-height { height: calc(((100vw - 56px - (12px * 8)) / 4) / 3 * 2); }
	.aps-col.m4 .shop-panel-height { height: calc(((100vw - 56px - (12px * 6)) / 3) / 3 * 2); }
	.aps-col.m6 .shop-panel-height { height: calc(((100vw - 56px - (12px * 4)) / 2) / 3 * 2); }
	.aps-col.m12 .shop-panel-height { height: calc((100vw - 56px - (12px * 2)) / 3 * 2); }
}

@media only screen and (min-width: 1153px) {
	.aps-col.m3 .shop-panel-height { height: calc(((1152px - 32px - (12px * 8)) / 4) / 3 * 2); }
	.aps-col.m4 .shop-panel-height { height: calc(((1152px - 32px - (12px * 6)) / 3) / 3 * 2); }
	.aps-col.m6 .shop-panel-height { height: calc(((1152px - 32px - (12px * 4)) / 2) / 3 * 2); }
	.aps-col.m12 .shop-panel-height { height: calc((1152px - 32px - (12px * 2)) / 3 * 2); }
}

.studio-spinner {
	background: #fefefe;
	border: 1px solid #cccccc;
	border-radius: 4px;
	position: fixed;
	top: 50%;
	left: 50%;
	display: none;
	width: 200px;
	height: 190px;
	transform: translate(-50%, -50%);
}

.studio-spinner span {
	border: solid 6px transparent;
	border-bottom: none;
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-block;
	-moz-transform-origin: 50% 100% 0;
	-webkit-transform-origin: 50% 100% 0;
	transform-origin: 50% 100% 0;
	-moz-animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
	-webkit-animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
	animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
}

.studio-spinner span:nth-child(1) {
	border-color: #2172b8;
	border-top-left-radius: 36px;
	border-top-right-radius: 36px;
	width: 44px;
	height: 22px;
	margin-top: -22px;
	margin-left: -22px;
	-moz-animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03);
	-webkit-animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03);
	animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03);
}

.studio-spinner span:nth-child(2) {
	border-color: #18a39b;
	border-top-left-radius: 42px;
	border-top-right-radius: 42px;
	width: 58px;
	height: 29px;
	margin-top: -29px;
	margin-left: -29px;
	-moz-animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03);
	-webkit-animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03);
	animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03);
}

.studio-spinner span:nth-child(3) {
	border-color: #82c545;
	border-top-left-radius: 48px;
	border-top-right-radius: 48px;
	width: 72px;
	height: 36px;
	margin-top: -36px;
	margin-left: -36px;
	-moz-animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03);
	-webkit-animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03);
	animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03);
}

.studio-spinner span:nth-child(4) {
	border-color: #f8b739;
	border-top-left-radius: 54px;
	border-top-right-radius: 54px;
	width: 86px;
	height: 43px;
	margin-top: -43px;
	margin-left: -43px;
	-moz-animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
	-webkit-animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
	animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
}

.studio-spinner span:nth-child(5) {
	border-color: #f06045;
	border-top-left-radius: 60px;
	border-top-right-radius: 60px;
	width: 100px;
	height: 50px;
	margin-top: -50px;
	margin-left: -50px;
	-moz-animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03);
	-webkit-animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03);
	animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03);
}

.studio-spinner span:nth-child(6) {
	border-color: #ed2861;
	border-top-left-radius: 66px;
	border-top-right-radius: 66px;
	width: 114px;
	height: 57px;
	margin-top: -57px;
	margin-left: -57px;
	-moz-animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
	-webkit-animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
	animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
}

.studio-spinner span:nth-child(7) {
	border-color: #c12680;
	border-top-left-radius: 72px;
	border-top-right-radius: 72px;
	width: 128px;
	height: 64px;
	margin-top: -64px;
	margin-left: -64px;
	-moz-animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03);
	-webkit-animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03);
	animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03);
}

.studio-spinner span:nth-child(8) {
	border-color: #5d3191;
	border-top-left-radius: 78px;
	border-top-right-radius: 78px;
	width: 142px;
	height: 71px;
	margin-top: -71px;
	margin-left: -71px;
	-moz-animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
	-webkit-animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
	animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
}

@keyframes rotate {
	to {
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* Inventory */
.shop-inventory-list,
.shop-inventory-list > .aps-panel-content {
	padding-top: 0;
	padding-left: 0;
}

.shop-inventory-list > .aps-panel-content {
	height: 550px;
	max-height: 550px;
}

.shop-inventory-row {
	justify-content: flex-start;
}

.shop-inventory-row > .aps-col {
	padding: 0 4px;
}

.shop-inventory-link {
	display: block;
	user-select: none;
}

.shop-inventory-link,
.shop-inventory-link:hover,
.shop-inventory-link:focus,
.shop-inventory-link:active {
	text-decoration: none;
}

.shop-inventory-link > .aps-panel-content {
	border-radius: 4px 4px 0 0;
	opacity: 0.75;
	height: 80px;
}

.shop-inventory-link,
.shop-inventory-link > .aps-panel-content {
	transition: border-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.shop-inventory-link:hover {
	border-color: #12a3eb;
	cursor: inherit;
}

.shop-inventory-link:hover > .aps-panel-content {
	opacity: 1;
}

.ui-draggable-dragging .shop-inventory-item,
.shop-inventory-list .shop-inventory-item { display: none; }
.shop-inventory-info .shop-inventory-link { display: none; }

.nojs .shop-inventory-list,
.nojs .shop-inventory-with-item + .aps-col { flex-basis: 100%; }
.nojs .shop-inventory-with-item { display: none; }
.nojs .shop-inventory-list:not(.shop-inventory-with-item) + .aps-col { display: none; }
.nojs .shop-inventory-list .shop-inventory-link > .aps-panel-content { height: 100px; }

@media all and (min-width: 1000px) {
	.nojs .shop-inventory-list .shop-inventory-link > .aps-panel-content { height: 150px; }
}

@media all and (max-width: 600px) {
	.shop-inventory-list,
	.shop-inventory-with-item + .aps-col { flex-basis: 100%; }
	.shop-inventory-with-item { display: none; }
	.shop-inventory-list:not(.shop-inventory-with-item) + .aps-col { display: none; }
	.shop-inventory-list .shop-inventory-link > .aps-panel-content { height: 100px; }
}

.shop-inventory-item-animate {
	animation: show 2.5s;
}

@keyframes show {
	from {
		opacity: 0.25;
		margin-top: 125px;
		transform: scale(0.25);
	}

	to {
		opacity: 1;
		margin-top: 0;
		transform: scale(1);
	}
}

.shop-inventory-item .shop-panel-background,
.shop-inventory-item .shop-vertical {
	border-radius: 4px 4px 0 0;
	height: 74px;
}

.shop-inventory-item-img { align-self: stretch; }

.shop-inventory-item-img .aps-panel,
.shop-inventory-item-img .aps-panel-content {
	border-radius: 4px;
	height: 100%;
}

.ui-draggable {
	cursor: grab;
}

.ui-draggable.ui-draggable-dragging {
	z-index: 2;
	width: 150px;
	height: 100px;
	cursor: grabbing;
}

.shop-inventory-overlay {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	display: block;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
}

.shop-inventory-proxy {
	position: relative;
	display: none;
	width: 100%;
	height: 550px;
}

.shop-inventory-proxy:only-child {
	display: block;
}

.shop-inventory-card {
	background: #ebebeb;
	border: 1px dashed rgba(18, 163, 235, 0.75);
	border-radius: 4px;
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 75px);
	width: 150px;
	height: 116px;
	transition: background-color 0.25s ease-in-out;
}

.shop-inventory-card-active { background: #eeeeee; }
.shop-inventory-card-paused { background: #f9f9f9; }

.shop-inventory-card-active:before {
	background:
		linear-gradient(90deg, #12a3eb 50%, transparent 50%),
		linear-gradient(90deg, #12a3eb 50%, transparent 50%),
		linear-gradient(0deg, #12a3eb 50%, transparent 50%),
		linear-gradient(0deg, #12a3eb 50%, transparent 50%);
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
	background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
	border-radius: 4px;
	position: absolute;
	z-index: -1;
	top: -4px;
	left: -4px;
	width: calc(100% + 8px);
	height: calc(100% + 8px);
	content: "";
	animation: border-rotate 6s infinite linear;
}

.shop-inventory-card-paused:before {
	background:
		linear-gradient(90deg, #70c7f3 50%, transparent 50%),
		linear-gradient(90deg, #70c7f3 50%, transparent 50%),
		linear-gradient(0deg, #70c7f3 50%, transparent 50%),
		linear-gradient(0deg, #70c7f3 50%, transparent 50%);
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
	background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
	animation-play-state: paused;
}

.shop-inventory-card > i {
	font-size: 48px;
	background: linear-gradient(-90deg, #12a3eb, #41b5ef, #41b5ef, #12a3eb, #0e82bc, #0e82bc, #12a3eb);
	-webkit-background-clip: text;
	background-size: 400%;
	text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
	color: transparent;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation-name: glowing;
	animation-duration: 15s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

@keyframes glowing {
	0% { background-position: 0 0; }
	50% { background-position: 300% 300%; }
	100% { background-position: 0 0; }
}

@keyframes border-rotate {
	0% { background-position: 0 0, 132px 120px, 0 136px, 154px 4px; }
	100% { background-position: 136px 0, -4px 120px, 0 0, 154px 156px; }
}

.shop-inventory-gift {
	position: relative;
	display: block;
}

.shop-inventory-gift-icon {
	font-size: 172px;
	line-height: 172px;
	color: #313131;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation-name: explode;
	animation-duration: 2s;
	animation-delay: 3s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.shop-inventory-gift-icon .fa-gift {
	animation-name: rubberBand;
	animation-duration: 1s;
	animation-delay: 1s;
	animation-iteration-count: 2;
	animation-fill-mode: both;
}

.shop-zoom-out {
	animation-name: zoomOut;
	animation-duration: 1.5s;
	animation-delay: 3.5s;
	animation-fill-mode: both;
}

.shop-zoom-hide {
	animation-name: hideOut;
	animation-duration: 0.1s;
	animation-delay: 5s;
	animation-fill-mode: both;
}

.shop-zoom-in {
	animation-name: zoomIn;
	animation-duration: 1s;
	animation-delay: 5.1s;
	animation-fill-mode: both;
}

@keyframes rubberBand {
	from { transform: scale3d(1, 1, 1); }
	30% { transform: scale3d(1.25, 0.75, 1); }
	40% { transform: scale3d(0.75, 1.25, 1); }
	50% { transform: scale3d(1.15, 0.85, 1); }
	65% { transform: scale3d(0.95, 1.05, 1); }
	75% { transform: scale3d(1.05, 0.95, 1); }
	to { transform: scale3d(1, 1, 1); }
}

@keyframes explode {
	from {
		opacity: 1;
		z-index: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	99% {
		opacity: 1;
		visibility: visible;
		width: auto;
		height: auto;
		transform: translate(-50%, -50%) scale(4);
	}

	to {
		opacity: 0;
		z-index: 0;
		visibility: hidden;
		width: 0;
		height: 0;
	}
}

@keyframes zoomIn {
	from {
		opacity: 0;
		width: 0;
		height: 0;
		transform: scale3d(0, 0, 0);
	}

	1% {
		width: auto;
		height: auto;
	}

	50% {
		opacity: 1;
	}
}

@keyframes zoomOut {
	from {
		opacity: 1;
	}

	50% {
		opacity: 0;
		width: 100%;
		height: auto;
		transform: scale3d(0.3, 0.3, 0.3);
	}

	to {
		opacity: 0;
		visibility: hidden;
		width: 0;
		height: 0;
	}
}

@keyframes hideOut {
	from {
		visibility: visible;
		width: 100%;
		height: 500px;
	}

	to {
		visibility: hidden;
		overflow: hidden;
		width: 0;
		height: 0;
	}
}

.shop-inventory-gift .shop-stars {
	font-size: 12px;
	text-align: center;
	color: #313131;
	position: absolute;
	left: 0;
	display: inline-block;
	width: 100%;
}

.shop-inventory-gift .shop-stars-top { top: 20%; }

.shop-inventory-gift .shop-stars-bottom {
	bottom: 20%;
}

.shop-inventory-gift .shop-stars .fa-star:nth-child(1) { transform: rotate(-40deg) translate(-40%, 75%); }
.shop-inventory-gift .shop-stars .fa-star:nth-child(2) { transform: rotate(-20deg) translate(0, 20%); }
.shop-inventory-gift .shop-stars .fa-star:nth-child(4) { transform: rotate(20deg) translate(0, 20%); }
.shop-inventory-gift .shop-stars .fa-star:nth-child(5) { transform: rotate(40deg) translate(40%, 75%); }

.shop-inventory-gift .shop-stars-bottom .fa-star:nth-child(1) { transform: rotate(220deg) translate(40%, 75%); }
.shop-inventory-gift .shop-stars-bottom .fa-star:nth-child(2) { transform: rotate(200deg) translate(0, 20%); }
.shop-inventory-gift .shop-stars-bottom .fa-star:nth-child(3) { transform: rotate(180deg); }
.shop-inventory-gift .shop-stars-bottom .fa-star:nth-child(4) { transform: rotate(160deg) translate(0, 20%); }
.shop-inventory-gift .shop-stars-bottom .fa-star:nth-child(5) { transform: rotate(140deg) translate(-40%, 75%); }

.shop-inventory-gift svg {
	width: 100%;
	height: 100%;
}

.shop-inventory-gift svg path {
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform-origin: 200px 200px;
	animation: rotate-left 20s linear 0s infinite;
	fill: none;
	stroke-width: 2px;
}

.shop-inventory-gift svg path:nth-child(1) { stroke: #5d3191; }
.shop-inventory-gift svg path:nth-child(2) { stroke: #c12680; }
.shop-inventory-gift svg path:nth-child(3) { stroke: #ed2861; }
.shop-inventory-gift svg path:nth-child(4) { stroke: #f06045; }
.shop-inventory-gift svg path:nth-child(5) { stroke: #f8b739; }
.shop-inventory-gift svg path:nth-child(6) { stroke: #82c545; }
.shop-inventory-gift svg path:nth-child(7) { stroke: #18a39b; }
.shop-inventory-gift svg path:nth-child(8) { stroke: #2172b8; }

.shop-inventory-gift svg path:nth-child(7) {
	animation: rotate-left 15s linear 0s infinite;
}

.shop-inventory-gift svg path:nth-child(3n) {
	animation: rotate-right 10s linear 0s infinite;
}

@keyframes rotate-right {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

@keyframes rotate-left {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(-360deg); }
}