div.block-area#packs
{
	padding: 25px 0px;
}

	ul.block-packages-list
	{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		row-gap: 40px;
		column-gap: 25px;
		width: 100%;
		list-style-type: none;
	}
	
		ul.block-packages-list li
		{
			display: flex;
			min-height: 500px;
			padding: 20px;
			background: #f4f2ec;
		}

			div.package-wrap
			{
				position: relative;
				width: 100%;
				height: 100%;
				padding: 30px;
				box-sizing: border-box;
			}

				div.package-border-wrap
				{
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0px;
					left: 0px;
				}
				
					div.package-border-line
					{
						position: absolute;
						display: table;
						width: 100%;
					}
					
					div.package-border-line.top
					{
						top: 0px;
						height: 150px;
					}
					
					div.package-border-line.middle
					{
						padding: 150px 0px 30px;
						height: 100%;
						box-sizing: border-box;
					}
					
						div.package-border-line-wrap
						{
							position: relative;
							height: 100%;
						}
					
					div.package-border-line.bottom
					{
						bottom: 0px;
						height: 30px;
					}
					
						div.package-border
						{
							display: table-cell;
							background-repeat: no-repeat;
							background-image: url('/img_files/items/blocks/block_8/bg-frame.svg');
						}
						
						div.package-border.top-left
						{
							width: 30px;
							background-size: 400px;
							background-position: top left;
						}
						
						div.package-border.top-center
						{
							background-size: 400px;
							background-position: top center;
						}
						
						div.package-border.top-right
						{
							width: 30px;
							background-size: 400px;
							background-position: top right;
						}
						
						div.package-border.middle-left
						{
							position: absolute;
							left: 0px;
							width: 30px;
							height: 100%;
							background-size: 400px;
							background-position: center left;
						}
						
						div.package-border.middle-right
						{
							position: absolute;
							right: 0px;
							width: 30px;
							height: 100%;
							background-size: 400px;
							background-position: center right;
						}
						
						div.package-border.bottom-left
						{
							width: 30px;
							background-size: 400px;
							background-position: bottom left;
						}
						
						div.package-border.bottom-center
						{
							background-size: 400px;
							background-position: bottom center;
						}
						
						div.package-border.bottom-right
						{
							width: 30px;
							background-size: 400px;
							background-position: bottom right;
						}
					
			div.package-content
			{
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 100%;
				height: 100%;
			}
			
				div.package-content-header
				{
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
					span.package-coin
					{
						display: block;
						width: 34px;
						height: 40px;
						margin-right: 15px;
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
					}
						
					span.package-name
					{
						font-family: Cinzel;
						font-size: 40px;
						text-transform: uppercase;
					}
					
				
				div.package-content-body
				{
					padding: 15px 0px;
				}
				
					div.package-content-body-header
					{
						width: 100%;
						padding: 10px 0px;
						border-top: 2px solid transparent;
						border-bottom: 2px solid transparent;
						border-image: linear-gradient(to right, #2e2010, #f5e0ce 35%, #2e2010 100%); /* Apply a linear gradient */
						border-image-slice: 1; /* Essential for border-image to work correctly */
					}
						
						span.package-title
						{
							display: block;
							font-size: 20px;
							font-weight: 600;
							text-align: center;
							text-transform: uppercase;
						}
						
						span.package-description
						{
							display: block;
							font-size: 14px;
							text-align: center;
							text-transform: uppercase;
						}
						
					div.package-benefts-list
					{
						width: 100%;
						margin-top: 20px;
					}
					
						div.package-benefts-list-item
						{
							display: flex;
							margin-bottom: 10px;
						}
						
						div.package-benefts-list-item:last-child
						{
							margin: 0px;
						}
						
							div.package-benefts-list-item-cell.icon
							{
								width: 8px;
								margin-right: 10px;
							}
							
								i.beneft-icon
								{
									display: block;
									width: 4px;
									height: 4px;
									margin: 4px 0px;
									border: 2px solid #000;
									transform: rotate(45deg);
									border-image-slice: 1;
								}
						
								div.package-benefts-list-item span
								{
									font-size: 14px;
									line-height: 16px;
								}
								
					div.package-ctrl
					{
						display: flex;
						justify-content: center;
						width: 100%;
						margin: 10px 0px;
					}
					
						span.package-btn
						{
							height: 44px;
							margin-right: 10px;
							padding: 3px 4px;
							box-sizing: border-box;
							border-radius: 30px;
							cursor: pointer;
						}
						
						span.package-btn:last-child
						{
							margin: 0px;
						}
						
						span.package-btn.silver
						{
							background-image: linear-gradient(to bottom, #616e75, #626d73 15%, #272c2f 30%, #40525b 100%);
						}
						
						span.package-btn.gold
						{
							background-image: linear-gradient(to right, #b26836, #fcc471 15%, #fcc471 50%, #8a4724 100%);
						}
						
						span.package-btn.grey
						{
							background-image: linear-gradient(to bottom, #b2b2b2, #d2d2d2 100%);
						}
						
							span.package-btn-wrap
							{
								display: flex;
								justify-content: center;
								align-items: center;
								height: 100%;
								padding: 0px 10px;
								border-radius: 30px;
								background-size: 100% 200%;
								background-position: 0% 100%;
								transition: 0.3s;
								-o-transition: 0.3s;
								-webkit-transition: 0.3s;
							}
							
							span.package-btn-wrap:hover
							{
								background-position: 0% 0%;
							}
							
							span.package-btn.silver span.package-btn-wrap
							{
								background-image: linear-gradient(to top, #40525b, #272c2f 15%, #9aa4a8 50%, #272c2f 75%, #40525b 100%);
							}

							span.package-btn.gold span.package-btn-wrap
							{
								background-image: linear-gradient(to top, #9d4a00, #ffc975 15%, #a75529 50%, #ffc975 75%, #9d4a00 100%);
							}
							
							span.package-btn.grey span.package-btn-wrap
							{
								background-image: linear-gradient(to top, #afb4b8, #e2e4e5 50%, #afb4b8 100%);
							}
							
								span.package-btn-label
								{
									font-family: Cinzel;
									font-size: 16px;
									font-weight: 700;
									line-height: 22px;
									text-transform: uppercase;
									color: #fff;
								}
								
								span.package-btn-label.grey
								{
									color: #7c7c7c;
								}
								
								span.package-btn-value
								{
									margin-left: 5px;
									background-image: linear-gradient(to top, #1c2c37, #ffffff 40%, #ffffff 75%, #505b63 100%);
									-webkit-background-clip: text;
									background-clip: text;
									-webkit-text-fill-color: transparent;
									font-family: Cinzel;
									font-size: 20px;
									font-weight: 700;
									line-height: 22px;
									text-transform: uppercase;
									color: transparent;
								}
								
								i.package-btn-icon
								{
									font-size: 22px;
									color: #fff;
								}
								
								i.package-btn-icon.left
								{
									margin-right: 2px;
								}
								
								i.package-btn-icon.right
								{
									margin-left: 2px;
								}
								
								i.package-btn-icon.grey
								{
									color: #7c7c7c;
								}
			
			div.pop-up-package
			{
				position: relative;
				float: left;
				width: 100%;
				background: #f4f2ec;
			}
							
				i.pop-up-package-close
				{
					position: absolute;
					right: -17px;
					top: -17px;
					font-size: 34px;
					color: #2c200e;
					cursor: pointer;
				}
				
				i.pop-up-package-close:before
				{
					position: relative;
					z-index: 1;
				}
				
				i.pop-up-package-close:after
				{
					position: absolute;
					content: '';
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
					border-radius: 34px;
					background: #f4f2ec;
					box-sizing: border-box;
					border: 1px solid #2c200e;
				}
							
				div.pop-up-package-wrap
				{
					position: relative;
					margin: 10px;
					padding: 80px 30px 60px;
					box-sizing: border-box;
				}

					div.pop-up-package-border-wrap
					{
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0px;
						left: 0px;
					}
					
						div.pop-up-package-border-line
						{
							position: absolute;
							display: table;
							width: 100%;
							height: 95px;
						}
						
						div.pop-up-package-border-line.top
						{
							top: 0px;
						}
						
						div.pop-up-package-border-line.middle
						{
							padding: 95px 0px;
							height: 100%;
							box-sizing: border-box;
						}
						
							div.pop-up-package-border-line-wrap
							{
								position: relative;
								height: 100%;
							}
						
						div.pop-up-package-border-line.bottom
						{
							bottom: 0px;
						}
						
							div.pop-up-package-border
							{
								display: table-cell;
								background-repeat: no-repeat;
								background-image: url('/img_files/items/blocks/block_8/bg-frame-modal.svg');
							}
							
							div.pop-up-package-border.top-left
							{
								width: 85px;
								background-size: 400px;
								background-position: top left;
							}
							
							div.pop-up-package-border.top-center
							{
								background-size: 400px;
								background-position: top center;
							}
							
							div.pop-up-package-border.top-right
							{
								width: 85px;
								background-size: 400px;
								background-position: top right;
							}
							
							div.pop-up-package-border.middle-left
							{
								position: absolute;
								left: 0px;
								width: 85px;
								height: 100%;
								background-size: 400px;
								background-position: center left;
							}
							
							div.pop-up-package-border.middle-right
							{
								position: absolute;
								right: 0px;
								width: 85px;
								height: 100%;
								background-size: 400px;
								background-position: center right;
							}
							
							div.pop-up-package-border.bottom-left
							{
								width: 85px;
								background-size: 400px;
								background-position: bottom left;
							}
							
							div.pop-up-package-border.bottom-center
							{
								background-size: 400px;
								background-position: bottom center;
							}
							
							div.pop-up-package-border.bottom-right
							{
								width: 85px;
								background-size: 400px;
								background-position: bottom right;
							}

					form.request-package
					{
						position: relative;
					}
					
						div.pop-up-package-form-line
						{
							margin-bottom: 15px;
						}
						
						div.pop-up-package-form-line.products-list
						{
							margin-bottom: 30px;
						}
						
						div.pop-up-package-form-line:last-child
						{
							margin: 0px;
						}
					
							span.pop-up-package-title
							{
								display: block;
								font-family: Cinzel;
								font-size: 28px;
								text-align: center;
								text-transform: uppercase;
							}
							
							label.pop-up-package-radio-btn
							{
								display: flex;
								justify-content: space-between;
								width: 100%;
								padding: 10px 0px;
								border-bottom: 1px solid #000;
								cursor: pointer;
							}
							
								span.pop-up-package-radio-btn-cell
								{
									display: flex;
								}
							
									input.pop-up-package-radio
									{
										display: none;
									}
									
									span.pop-up-package-radio-text
									{
										display: block;
										font-size: 18px;
										font-weight: 600;
										line-height: 20px;
									}
									
									i.pop-up-package-radio-icon
									{
										font-size: 20px;
										margin-right: 10px;
									}
									
							div.pop-up-package-ctrl
							{
								display: flex;
								justify-content: center;
								width: 100%;
							}